Question

我有一组复选框，它们都是一个数组的一部分。我要求的是，如果第一个被选中（我不介意），那么其他任何一个都是未被选中的，反之亦然 - 如果选择了最后三个选项之一，那么我不介意需要未选中。最后三个选项可以同时选择。

This Link与我要求的相似。任何帮助将不胜感激

<fieldset class="checkbox">
    <legend>Sitter type</legend>
    <div id="field_844" class="input-options checkbox-options">
        <label for="field_1071_0" class="option-label">
            <input  type="checkbox" name="field_844[]" id="field_1071_0" value="I don&#039;t mind">I don&#039;t mind</label>
        <label for="field_1072_1" class="option-label">
            <input  checked="checked" type="checkbox" name="field_844[]" id="field_1072_1" value="Sitter">Sitter</label>
        <label for="field_1073_2" class="option-label">
            <input  type="checkbox" name="field_844[]" id="field_1073_2" value="Nanny">Nanny</label>
        <label for="field_1074_3" class="option-label">
            <input  type="checkbox" name="field_844[]" id="field_1074_3" value="Au Pair">Au Pair</label>
    </div>
</fieldset>

Answer 1

代码与您提供的链接完全相同。

<fieldset class="checkbox">
    <legend>Sitter type</legend>
    <div id="field_844" class="input-options checkbox-options">
        <label for="field_1071_0" class="option-label">
            <input  type="checkbox" name="field_844[]" id="field_1071_0" value="I don&#039;t mind">I don&#039;t mind</label>
        <label for="field_1072_1" class="option-label">
            <input  checked="checked" type="checkbox" name="field_844[]" id="field_1072_1" value="Sitter">Sitter</label>
        <label for="field_1073_2" class="option-label">
            <input  type="checkbox" name="field_844[]" id="field_1073_2" value="Nanny">Nanny</label>
        <label for="field_1074_3" class="option-label">
            <input  type="checkbox" name="field_844[]" id="field_1074_3" value="Au Pair">Au Pair</label>
    </div>
</fieldset>

然后：

// We cache all the inputs except `#field_1071_0` with `:not` pseudo-class
var $target = $('input:not(#field_1071_0)');


$('#field_1071_0').on('change', function () {

    // if 'i don't mind' is selected.
    if (this.checked) {     
       // remove the 'checked' attribute from the rest checkbox inputs.
        $target.prop('checked', false);
    }
});

$target.on('change', function () {
    // if one of the bottom three options are selected
    if (this.checked) {  
        // then I don't mind needs to be unselected
        $('#field_1071_0').prop('checked', false);
    }
});

演示：https://jsfiddle.net/426qLkrn/4/

Answer 2

我不记得JavaScript或jQuery的内部功能可以解决您的问题。所以，你必须自己解决它。

您可以在复选框中添加data属性，其中列出了当前复选框无法同时选中的所有复选框（作为ID），例如：

<input type="checkbox" name="field_844[]" id="field_1071_0" value="I don&#039;t mind" data-exclude="['field_1072_1','field_1072_2','field_1072_3']" />
<input checked="checked" type="checkbox" name="field_844[]" id="field_1072_1" value="Sitter" data-exclude="['field_1071_0']" />
...

然后，您为每个复选框添加一个onchange事件。此事件检查复选框是已更改为已选中还是未选中。如果已更改为已选中，则必须取消选中列表中的所有复选框：

document.getElementById("field_1071_0").onchange= function(e) {
    if (this.checked) {
         this.dataset.exclude.forEach(function (exc) {
            document.getElementById(exc).checked = false;
         });
    }
};

或者，使用jQuery：

$("#field_1071_0").change(function (e) {
    if ($(this).prop("checked")) {
        $(this).data('exclude').forEach(function (exc) {
            $("#" + exc).prop("checked", false);
        });
    }
});

好处是：您可以将此功能应用于您想要的每个复选框，例如：

$("input:checkbox").change(function (e) {
    if ($(this).prop("checked")) {
        $(this).data('exclude').forEach(function (exc) {
            $("#" + exc).prop("checked", false);
        });
    }
});

现在，每个复选框都具有所需的行为。所以，这个解决方案是解决它的一般方法。

评论：如果您无权访问HTML代码，即输入字段以添加某些信息（如data-attribute），您也可以通过jQuery / JavaScript添加这些信息：

$("#field_1071_0").data("exclude", ['field_1072_1','field_1072_2','field_1072_3']);
$("#field_1072_1").data("exclude", ['field_1071_0']);
...

Answer 3

jquery prop方法可用于实际检查或取消选中复选框。 is可用于评估条件是真还是假。

希望此代码段有用

＆＃13;

// if first check box is selected , then checkedremaining three
$("#field_1071_0").on('change', function() {
   //$(this) is the check box with id field_1071_0
   // checking if first checkbox is checked
  if ($(this).is(":checked")) {
    //opt2 is a common class for rest of the check boxes
    // it will uncheck all other checkbox
    $(".opt2").prop('checked', false)
  }
})
//unchecking first checkbox when any of the rest check box is checked
$(".opt2").on('change', function() {
  if ($(this).is(":checked")) {
    $("#field_1071_0").prop('checked', false)
  }
})

＆＃13;

<!--Adding a class `opt2` to the last three checkboxes-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset class="checkbox">
  <legend>Sitter type</legend>
  <div id="field_844" class="input-options checkbox-options">
    <label for="field_1071_0" class="option-label">
      <input type="checkbox" name="field_844[]" id="field_1071_0" value="I don&#039;t mind">I don&#039;t mind</label>
    <label for="field_1072_1" class="option-label">
      <input checked="checked" type="checkbox" class="opt2" name="field_844[]" id="field_1072_1" value="Sitter">Sitter</label>
    <label for="field_1073_2" class="option-label">
      <input type="checkbox" name="field_844[]" class="opt2" id="field_1073_2" value="Nanny">Nanny</label>
    <label for="field_1074_3" class="option-label">
      <input type="checkbox" name="field_844[]" id="field_1074_3" value="Au Pair" class="opt2">Au Pair</label>
  </div>
</fieldset>

＆＃13;

Javascript - 取消选中复选框，互斥项目

3 个答案: