javascript - 当另一个复选框被重叠选中时取消全部选中/选中一个复选框

Question

我有下拉复选框，如果我单击名为'ALL'的复选框，它将取消选择所有其他选定的复选框，它可以工作，但是当我尝试以相反的方式选择时除了 'ALL' 之外的复选框，它只会取消选择 'ALL' 复选框，它与我的第一个函数重叠，它完成这项工作，但是 'ALL' 复选框未选中，任何人都可以帮助我解决此问题，非常感谢任何帮助。

下面是我的代码:

HTML:

<label class="text-primary" for="type">Type: </label>
                        <select id="type" mode="checkbox" style="width: 300;">
                            <option value="ALL" selected="Selected" checked="1">ALL</option>
                            <option value="Car">Car</option>
                            <option value="Ball">Ball</option>
                            <option value="Radio">Radio</option>
                        </select>

JavaScript:

type_combobox.attachEvent("onCheck", function(value, state){
        var values = type_combobox.getChecked();
        type_value = {};// put combo value into scope variable
        for(var i = 0; i < values.length; i++){
            type_value[values[i]] = true;// build hash for easy check later
        }
        //UNCHECK CHECKBOXES IF ALL IS SELECTED
        if(type_value['ALL'] == true){
            type_combobox.forEachOption(function(optId){
                type_combobox.setChecked(optId.index,false);
            })
            type_combobox.setChecked(0,true);
        }
        gantt.render();// and repaint gantt
    });

    //InCORRECT
        if(type_value['ALL'] == true && !type_value['ALL'] == false){
            type_combobox.setChecked(0,false);
        }  

Answer 1

希望这有帮助，我认为这符合您的预期:

$(function(){

function unCheckAll() {

  $(".myCheckGroup").each(function(index) {
  if ($(this).attr('name') != 'all')
    $(this).prop('checked', false);
})
}

$(".myCheckGroup").change(function() {
  let chk = this;
  let isChecked = $(this).is(':checked')
  console.log(chk.name)
  if (chk.name == 'all') {
      unCheckAll()
  }else {
    $('.myCheckGroup[name=all]').prop('checked', false);
  }
})

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><input type="checkbox" name="all" value="all" class="myCheckGroup">all</div>
<div><input type="checkbox" name="one" value="1" class="myCheckGroup">one</div>
<div><input type="checkbox" name="two" value="2" class="myCheckGroup">two</div>
<div><input type="checkbox" name="thee" value="3" class="myCheckGroup">three</div>
<div><input type="checkbox" name="four" value="4" class="myCheckGroup">four</div>