如果一个已签入数组,如何禁用或取消选中所有复选框? [英] How I disable or uncheck all checkboxes, if one checked in array?
问题描述
我必须在项目中使用复选框组.
I have to use group of checkboxes in my project.
这是我的HTML外观:
This is how my HTML look like:
<label class="checkbox-inline">
<input type="checkbox" name="hairColor" value="1"> hairColor-1
</label>
<label class="checkbox-inline">
<input type="checkbox" name="hairColor" value="2"> hairColor-2
</label>
<label class="checkbox-inline">
<input type="checkbox" name="hairColor" value="3"> hairColor-3
</label>
<label class="checkbox-inline">
<input type="checkbox" name="hairColor" value="4" class="any"> any
</label>
<br>
<label class="checkbox-inline">
<input type="checkbox" name="eyeColor" value="1"> eyeColor-1
</label>
<label class="checkbox-inline">
<input type="checkbox" name="eyeColor" value="2"> eyeColor-2
</label>
<label class="checkbox-inline">
<input type="checkbox" name="eyeColor" value="3"> eyeColor-3
</label>
<label class="checkbox-inline">
<input type="checkbox" name="eyeColor" value="4" class="any"> any
</label>
使用此复选框,用户可以选择自己喜欢的选择.但是,如果他们选择带有"any"的复选框文本,则需要取消选中组中所有其他已选择的内容.而且,如果他们选中该复选框,则不应选中其他复选框.
Using this checkboxes, users can select their preferred selection. But if they select the checkbox text with "any" I need to uncheck all other selection already made within a group. And also if they check that checkbox other chechboxes should not be check.
这是我使用Jquery尝试的方式.
This is how I tried it using Jquery.
$( "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);
}
}
});
它正在为我工作.但是我的问题是,当我将name
值更改为array
类型(如hairColor[]
)时,我的代码无法正常工作.
It's working for me. But my problem is when I change name
value to array
type like hairColor[]
then my code is not working.
推荐答案
由于您的姓名属性包含[]
,因此您需要转义或切换单/双引号用法,例如>
Since your name attributes contain []
, you either need to escape them or switch your single/double quote usage like
$('[name="' + $(this).attr("name") + '"].any')
$("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);
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<label class="checkbox-inline">
<input type="checkbox" name="hairColor[]" value="1">hairColor-1
</label>
<label class="checkbox-inline">
<input type="checkbox" name="hairColor[]" value="2">hairColor-2
</label>
<label class="checkbox-inline">
<input type="checkbox" name="hairColor[]" value="3">hairColor-3
</label>
<label class="checkbox-inline">
<input type="checkbox" name="hairColor[]" value="4" class="any">any
</label>
<br>
<label class="checkbox-inline">
<input type="checkbox" name="eyeColor[]" value="1">eyeColor-1
</label>
<label class="checkbox-inline">
<input type="checkbox" name="eyeColor[]" value="2">eyeColor-2
</label>
<label class="checkbox-inline">
<input type="checkbox" name="eyeColor[]" value="3">eyeColor-3
</label>
<label class="checkbox-inline">
<input type="checkbox" name="eyeColor[]" value="4" class="any">any
</label>
有关正方形的输入,请参见 jQuery选择器名称属性中的括号
See jQuery selector for inputs with square brackets in the name attribute
这篇关于如果一个已签入数组,如何禁用或取消选中所有复选框?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!