1

チェックボックス自体が非表示になっているチェックボックスラベルを作成しようとしていますが、ラベルがラベルをクリックしていないため、表示されていなくてもチェックボックスをチェックしています。

私がしたいのは、それがチェックされているとき、ラベルは赤のままです。このために、チェックボックスをアクティブにするクラスを割り当てましたが、機能していません。アクティブではなく、ホバーで正常に動作します。クリックするとチェックボックスがチェックされますが、ラベルはアクティブなクラスを読み取りません。

何か案は？

次のhtmlを使用します。

<div class="gl_delete">
    <div class="deleteCB">
        <input id="uImgId47" type="checkbox" name="uImgId[]" value="47"></input>
        <input type="hidden" name="filename[]" value="6_246f0548d62b9b9cc19210389ef09472.jpg"></input>
        <label onclick="$('#delHolder').show()" for="uImgId47"> X </label>
    </div>
</div>

そして、次のcss

.deleteCB {
width: 20px;    
margin: 20px auto;
}

.deleteCB label, .deleteCB label:after {
cursor: pointer;
position: absolute;
font-weight:bold;
font-size:14px;
content: 'x';
line-height:14px;
position: absolute;
border-radius:6px;
padding-left:9px;
padding-top:3px;
color:#fff;
width: 17px;
height: 21px;
background: #ccc;
border:1px solid #ccc;
top: -1px;
right: -1px;
padding-bottom:0;
}

.deleteCB label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
color:#fff;
background: #cc3333;
border:1px solid #cc3333;
}

.deleteCB label:hover::after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=100);
opacity: 1;
}

.deleteCB input[type=checkbox]:checked + label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}

/* hide checkbox */
input[type=checkbox] {
visibility: hidden;
}
4

2 に答える 2

0

私の理解が正しければ、CSS だけに頼るのではなく、JavaScript を使用してラベルにクラスを追加することをお勧めします。ラベルには既にハンドラーがあるonclickので、それがクリックされたときに呼び出す関数を作成することをお勧めします。これは、show()既に持っているメソッドを処理し、ラベルにクラスを追加します。

たとえば、HTML:

<label id="labelImgId47" onclick="onLabelClick()" for="uImgId47">...</label>

...そして JavaScript:

function onLabelClick() {
    $('#delHolder').show();
    $('#labelImgId47').addClass('active');
}

ユーザーがチェックボックスのオン/オフを切り替えることができる場合、条件付きロジックを追加して、チェックボックスがオンになっているかどうかを確認しremoveClass()、ボックスをオフとして表示する必要がある場合は jQuery 関数を使用できます。

active次に、CSS で、クラスを使用してラベルのスタイルを設定できます。

.deleteCB label.active {
    // Your styles here
}
于 2013-05-15T12:56:04.300 に答える