當我選中復選框時，它應該將類添加到主 div。此外，當我再次嘗試檢查第二個復選框時，它應該在第一次檢查時洗掉，并將其添加到我檢查的復選框中
請看下面的代碼；
$(".img-rdo :checkbox").change(function() {
$this.closest(".img-rdo").toggleClass('checked', this.checked);
})
$('.img-rdo .imgRdo').change(function() {
$(this).closest('.img-rdo').find(':checkbox').prop('checked', this.value != 0).change();
});.img-rdo {
background: yellow;
margin: 10px;
}
.img-rdo.checked {
background: green;
margin: 10px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="img-rdo" nk-rdo-style="1">
<input type="radio" id="img-rdo2" name="img-sample-1" class="imgRdo">
<label class="imgRdo-lbl" for="img-rdo2">
<div class="rdo-txt">Radio Button with image design component</div>
</label>
</div>
<div class="img-rdo">
<input type="radio" id="img-rdo3" name="img-sample-1" class="imgRdo">
<label class="imgRdo-lbl" for="img-rdo3">
<div class="rdo-txt">Radio Image</div>
</label>
</div>
<div class="img-rdo">
<input type="radio" id="img-rdo4" name="img-sample-1" class="imgRdo">
<label class="imgRdo-lbl" for="img-rdo4">
<div class="rdo-txt">Radio Image</div>
</label>
</div>uj5u.com熱心網友回復：
您需要更改容器類，而不是將 div 包裝在標簽中
$(".imgRdo").change(function() {
$(".img-rdo").removeClass('checked');
$(this).closest('.img-rdo').toggleClass('checked', this.checked);
}).img-rdo {
background: yellow;
margin: 10px;
}
.img-rdo.checked {
background-color: green;
margin: 10px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="img-rdo" nk-rdo-style="1">
<label class="imgRdo-lbl" for="img-rdo2">
<input type="radio" id="img-rdo2" name="img-sample-1" class="imgRdo">
<span class="rdo-txt">Radio Button with image design component</span>
</label>
</div>
<div class="img-rdo">
<label class="imgRdo-lbl" for="img-rdo3">
<input type="radio" id="img-rdo3" name="img-sample-1" class="imgRdo">
<span class="rdo-txt">Radio Image</span>
</label>
</div>
<div class="img-rdo">
<label class="imgRdo-lbl" for="img-rdo4">
<input type="radio" id="img-rdo4" name="img-sample-1" class="imgRdo">
<span class="rdo-txt">Radio Image</span>
</label>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/315374.html
上一篇：重復結果以從陣列中提取資料