我有一组复选框,像这样:
<label class="checkbox-inline">
<input type="checkbox" id="" value="1"> information
</label>
<label class="checkbox-inline">
<input type="checkbox" id="" value="2"> information
</label>
<label class="checkbox-inline">
<input type="checkbox" id="" value="3"> information
</label>
<label class="checkbox-inline">
<input type="checkbox" id="" value="4"> any
</label>
使用这些复选框,用户可以进行选择。但是,如果用户选择了“任何” 复选框,那么我需要取消选择所有其他选择。
我试过类似的方法,但它对我不起作用。
$('.checkbox-inline').click(function(){
$("input[type='checkbox']").attr('checked', false);
$(this).attr('checked', true);
})
谁能告诉我如何在 jquery 中执行此操作?
注意:我为我的复选框使用动态生成的 HTML。
最佳答案
在任意复选框
中定义一个id
,像这样:
<label class="checkbox-inline">
<input type="checkbox" id="" value="1"> information
</label>
<label class="checkbox-inline">
<input type="checkbox" id="" value="2"> information
</label>
<label class="checkbox-inline">
<input type="checkbox" id="" value="3"> information
</label>
<label class="checkbox-inline">
<input type="checkbox" id="any-checkbox" value="4"> any
</label>
我建议这样做是因为利用它是第四个这一事实并不是一个好主意。如果以后再在它前面加一个checkbox,那么它就不再是第四个了。
//We use .on to tackle with the dynamic nature of the HTML
$( "body" ).on( "change", ".checkbox-inline > input[type=checkbox]", function() {
if ($(this).attr("id") === "any-checkbox") { //Any checkbox tick
if ($(this).prop("checked")) { //User checked any
//Other checkboxes are unchecked
$(".checkbox-inline > input[type=checkbox]:not(#any-checkbox)").prop("checked", false)
}
} else { //Other checkbox tick
if ($(this).prop("checked")) {//User checked another checkbox
//Any checkbox is unchecked
$("#any-checkbox").prop("checked", false);
}
}
});
编辑:根据评论,我已经解决了多个组的问题,如下所示:
<label class="checkbox-inline">
<input type="checkbox" id="" name="hairColor" value="1"> information
</label>
<label class="checkbox-inline">
<input type="checkbox" id="" name="hairColor" value="2"> information
</label>
<label class="checkbox-inline">
<input type="checkbox" id="" name="hairColor" value="3"> information
</label>
<label class="checkbox-inline">
<input type="checkbox" id="hairColor" name="hairColor" value="4" class="any"> any
</label>
<br>
<label class="checkbox-inline">
<input type="checkbox" id="" name="eyeColor" value="1"> eyeColor
</label>
<label class="checkbox-inline">
<input type="checkbox" id="" name="eyeColor" value="2"> eyeColor
</label>
<label class="checkbox-inline">
<input type="checkbox" id="" name="eyeColor" value="3"> eyeColor
</label>
<label class="checkbox-inline">
<input type="checkbox" id="eyeColor" name="eyeColor" class="any" value="4"> any
</label>
//We use .on to tackle with the dynamic nature of the HTML
$( "body" ).on( "change", ".checkbox-inline > input[type=checkbox]", function() {
if ($(this).hasClass("any")) { //Any checkbox tick
if ($(this).prop("checked")) { //User checked any
//Other checkboxes are unchecked
$(".checkbox-inline > input[type=checkbox][name=" + $(this).attr("name") + "]:not(.any)").prop("checked", false)
}
} else { //Other checkbox tick
if ($(this).prop("checked")) {//User checked another checkbox
//Any checkbox is unchecked
$("[name=" + $(this).attr("name") + "].any").prop("checked", false);
}
}
});
关于javascript - 如果选中一个复选框,如何取消选中所有复选框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30556100/