変更ラベルの色のチェックボックスが

Question

<label class="black">Blacks 
    <input type="checkbox"> 
    <span class="checkmark"></span> 
</label> 

をチェックすると、私はチェックボックスがチェックされたときに、私の<label>のためにCSSの下に適用したい：

border-bottom: 1px solid #7f7f7f; 

誰も私が解決するのに役立つことはできますか？

Answer 1

<label class="black">Blacks 
    <input type="checkbox"> 
    <span class="checkmark"></span> 
</label> 


$('label').on('click', 'input:checkbox', function() { 
     $(this).parent().toggleClass('highlight', this.checked); 
    }); 

あなたがこれまでに試してみました何

label.highlight{border-bottom: 1px solid #7f7f7f; 

Answer 2

使用parent()とjQueryからtoggleClass方法は、あなたが少しあなたのHTMLの構造を変更するに開いている場合、クラス

function toggleCheck(elem) { 
 
    console.log(elem) 
 
    $(elem).parent().toggleClass('borderBottom') 
 

 

 
}

.borderBottom { 
 
    border-bottom: 1px solid #7f7f7f; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label class="black">Blacks 
 
    <input type="checkbox" onchange="toggleCheck(this)"> 
 
    <span class="checkmark"></span> 
 
</label>

Answer 3

削除/ラベルを選択して追加するには、どんなことなくこれを行うことができますJavascript。

入力後にラベルを配置する必要があるため、隣接セレクタ（+）を使用してラベルを選択し、:checked疑似セレクタに基づいて、ラベルの枠線を切り替えることができます。

は、それがどのように動作するかを確認するには、以下のスニペットを確認します。

#myCheckbox:checked + label { 
 
    border-bottom: 1px solid #7f7f7f; 
 
}

<input type="checkbox" id="myCheckbox"> 
 

 
<label class="black" for="myCheckbox"> 
 
    Blacks 
 
    <span class="checkmark"></span> 
 
</label>

Answer 4

label{ 
 
    position: relative; 
 
} 
 
.checkmark{ 
 
    position: absolute; 
 
    width: 100%; 
 
    left: 0; 
 
    bottom: -4px; 
 
    height: 1px; 
 
    background: red; 
 
} 
 
input:checked + .checkmark{ 
 
    background: green; 
 
}

<label class="black">Blacks 
 
    <input type="checkbox"> 
 
    <span class="checkmark"></span> 
 
</label>

Answer 5

はあなたのスパン中にあなたのチェックボックスを検索し、削除クラスを追加します。

$('.black').find('input[type=checkbox]').change(function() { 
 
    if (this.checked) 
 
    $(this).parent().addClass('testClass'); 
 
    else 
 
    $(this).parent().removeClass('testClass'); 
 
});

.testClass { 
 
border-bottom: 1px solid #7f7f7f; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label class="black">Blacks 
 
    <input type="checkbox"> 
 
    <span class="checkmark"></span> 
 
</label>