如果在数组中选中一个复选框，我如何禁用或取消选中所有复选框？

Question

我必须在我的项目中使用一组复选框。

这是我的 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>

使用此复选框，用户可以 select 他们的首选 selection。但是，如果他们 select 带有 "any" 的复选框文本，我需要取消选中组中已经创建的所有其他 selection。而且，如果他们选中该复选框，则不应选中其他复选框。

这就是我使用 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[] 然后我的代码不起作用。

Answer 1

由于您的名称属性包含 []，您需要转义或将您的 single/double 引用用法改为

$('[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 selector for inputs with square brackets in the name attribute

Answer 2

我喜欢 AmmarCSE 的回答，我投了赞成票，但我相信肯定有改进的余地。您的名称属性中可能有其他字符，并且您可能有一个字符的更多实例。因此，我相信一个简单的函数应该可以解决这个问题，如下所示：

function escapeSpecialChars(input) {
     return input.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\^$\|]/g, "\$&");
}

然后你应用它，像这样：

$( "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.

如果在数组中选中一个复选框，我如何禁用或取消选中所有复选框？

How I disable or uncheck all checkboxes, if one checked in array?

javascript

checkbox

jquery