[英]How I disable or uncheck all checkboxes, if one checked in array?
I have to use group of checkboxes in my project. 我必须在我的项目中使用一组复选框。
This is how my HTML look like: 这就是我的HTML的样子:
<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>
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. 但如果他们选择带有“any”的复选框文本,我需要取消选中已在组内进行的所有其他选择。 And also if they check that checkbox other chechboxes should not be check. 而且,如果他们检查该复选框,则不应检查其他chechbox。
This is how I tried it using Jquery. 这就是我使用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);
}
}
});
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. 但我的问题是当我将name
值更改name
像hairColor[]
这样的array
类型时,我的代码无效。
I like AmmarCSE's answer, I have upvoted it, but I believe there is certainly room for improvement. 我喜欢AmmarCSE的答案,我赞成它,但我相信肯定有改进的余地。 You might have other characters in your name attribute and you might have more instances of a character. 您的name属性中可能包含其他字符,并且您可能有更多字符实例。 As a result, I believe a simple function should solve the issue, like this: 因此,我认为一个简单的函数应该可以解决这个问题,如下所示:
function escapeSpecialChars(input) {
return input.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
}
and then you apply it, like this: 然后你应用它,像这样:
$( "body" ).on( "change", ".checkbox-inline > input[type=checkbox]", function() {
var escapedSelector = escapeSpecialChars($(this).attr("name"));
if ($(this).hasClass("any")) { //Any checkbox tick
if ($(this).prop("checked")) { //User checked any
//Other checkboxes are unchecked
$(".checkbox-inline > input[type=checkbox][name=" + escapedSelector + "]:not(.any)").prop("checked", false)
}
} else { //Other checkbox tick
if ($(this).prop("checked")) {//User checked another checkbox
//Any checkbox is unchecked
$("[name=" + escapedSelector + "].any").prop("checked", false);
}
}
});
Working fiddle . 工作小提琴 。
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>
See jQuery selector for inputs with square brackets in the name attribute 有关name属性中带方括号的输入,请参阅jQuery选择器
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.