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

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 代码，即无法访问输入字段以添加一些信息，例如数据属性，您也可以通过 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 可用于评估条件是真还是假。

希望这个 sn-p 有用

// 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)
  }
})

<!--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>