4

チェックボックスをオンまたはオフにしたときに、チェックボックスラベルのフォントの色と背景色を変更しようとしています。このサイトでjavascriptソリューションを見つけましたが、コードを機能させることができませんでした。これが私がこれまでに試したことです。現在、「highlight」クラスを親divにアタッチしており、ラベルを変更するだけです。御時間ありがとうございます。

HTML：

<div class="checkboxes">
    <input type="checkbox" name="1" id="option one" value="orange"><label for="1" class="highlight">Orange</label>
    <input type="checkbox" name="2" id="option two" value="apple"><label for="1" class="highlight">Apple</label>
</div>

JavaScript：

$( '.checkboxes' ).on( 'click', 'input:checkbox', function () {
    $( this ).parent().toggleClass( 'highlight', this.checked );
}); // end checkbox style​

CSS：

.checkboxes label {
    font-family:Open Sans Italic;
    font-size: 12px;
    color: #666;
    border-radius: 20px 20px 20px 20px;
    background: #f0f0f0;
    padding: 3px 10px;
    text-align: left;
}
.highlight {
    font-family:Open Sans Italic;
    font-size: 12px;
    color: white;
    border-radius: 20px 20px 20px 20px;
    background: #86b3c1;
    padding: 3px 10px;
    text-align: left;
}
4

3 に答える 3

9

CSSだけを使用してそれを行うことができます：

input[type=checkbox]:checked + label { /* styles that get changed */ }

デモhttp://dabblet.com/gist/3157721

また、デモの作成中に、いくつかの問題に気づきました。

  • id="option one"-IDは1つだけである必要があり、スペースを含めることはできません
  • forの属性の値は、対応する;の（ではなく）であるlabel必要があります。これにより、チェックボックス自体ではなく、ラベルをクリックしてチェックボックスをオン/オフにすることもできます。idnameinput
于 2012-07-22T00:33:25.587 に答える
3

ラベルはチェックボックスの後にあります。コードは、次のように、チェックボックスをラップしているラベルを対象としているようです。

<label for="1" class="highlight">Orange
    <input type="checkbox" name="1" id="option one" value="orange">
</label>

htmlを変更するか、JSを変更して、最も近い親要素ではなく、次の要素をターゲットにします。

$( '.checkboxes' ).on( 'click', 'input[type="checkbox"]', function () {
    $( this ).next('label').toggleClass( 'highlight', this.checked );
});

また、CSSに欠陥があり、ラベルを直接ターゲットにすると、ハイライトクラスが優先されるため、クラスが適用されても色が変わることはありません。

これがフィドルです。ハイライトクラスをターゲットにするときに、より具体的に修正しました。

フィドル

そして、Raminsonは正しいので、角かっことtype=""でチェックボックスをターゲットにする必要があります。

于 2012-07-22T00:19:54.760 に答える
2

closest()選択した要素に最も近い要素が見つかりません。最も近い親が見つかりますnext()。メソッドを使用できます。次のことを試してください。

現在の要素から始まり、DOMツリーを上に向かって、セレクターに一致する最初の要素を取得します。

$('.checkboxes').on('click', 'input[type="checkbox"]', function () {
     $(this).next('label').toggleClass('highlight', this.checked);
});

:checkboxセレクターは。であることに注意してくださいdeprecated。

于 2012-07-22T00:21:55.920 に答える