当检查所有space复选框时，其他要未选中和禁用的复选框

Question

我有一组表示房子 spaces 的复选框，最后一个复选框用于所有 space 的房子。我想在选中 "All space" 复选框时禁用并取消选中其他复选框。它的 javascript 代码是什么？

 <html>
 <label  class="input-group-addon">
                          <input type="checkbox" value="1" id="rndr-lobby" 
 name="rndr-int-options"  />
                          Lobby </label>
                        <label  class="input-group-addon">
                          <input type="checkbox" value="1.4" id="rndr-room" 
 name="rndr-int-options" />
                         Room </label>
                        <label  class="input-group-addon">
                          <input type="checkbox" value="1.5" id="rndr-living" name="rndr-int-options" />
                          Living </label>
                        <label  class="input-group-addon">
                          <input type="checkbox" value="1.6" id="rndr-wc" name="rndr-int-options" />
                         WC </label>
                        <label  class="input-group-addon">
                          <input type="checkbox" value="1.3" id="rndr-kitchen" name="rndr-int-options" />
                          Kitchen </label>
                        <label  class="input-group-addon">
                          <input type="checkbox" value="1.3" id="rndr-office" name="rndr-int-options" />
                          Office </label>
                        <label  class="input-group-addon">
                          <input type="checkbox" value="1.3" id="rndr-saloon" name="rndr-int-options" />
                          Saloon  </label>
                        <label  class="input-group-addon">
                          <input type="checkbox" value="1.3" id="rndr-all" name="rndr-int-options" onchange="AllCk();"/>
                         All sapce</label>
 </html>
    <script>

document.getElementById('rndr-all').onchange = function() {AllCk();};

var  AllCk = function () {
    var RndrLob = document.getElementById("rndr-lobby"),
        RndrRoo = document.getElementById("rndr-room"),
        RndrLiv = document.getElementById("rndr-living"),
        RndrWc =  document.getElementById("rndr-wc"),
        RndrKit = document.getElementById("rndr-kitchen"),
        RndrOff = document.getElementById("rndr-office"),
        RndrSal = document.getElementById("rndr-saloon"),
        RndrAll = document.getElementById('rnder-all').checked;

    if (RndrAll === true) {

        RndrLob.disabled = true; RndrLob.checked = false;
        RndrRoo.disabled = true; RndrRoo.checked = false;
        RndrLiv.disabled = true; RndrLiv.checked = false;
        RndrWc.disabled  = true; RndrWc.checked  = false;
        RndrKit.disabled = true; RndrKit.checked = false;
        RndrOff.disabled = true; RndrOff.checked = false;
        RndrSal.disabled = true; RndrSal.checked = false;
        RndrAll.disabled = true; RndrAll.checked = false;

    }


};
    </script>

Answer 1

   function AllCk() {
        if (document.querySelector('#rndr-all').checked) {
        var inputs = document.getElementsByTagName("input");
          for (var i = 0; i < inputs.length; i++) {
             if (inputs[i].type == "checkbox") {
            if (inputs[i].id != "rndr-all") {
                inputs[i].checked = false;
                inputs[i].disabled = true;
            }
        }
     }
    } else {
     var inputs = document.getElementsByTagName("input");
     for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].type == "checkbox") {

            if (inputs[i].id != "rndr-all") {
                inputs[i].disabled = false;
            }
        }
     }
    }

}

// 通过 Jquery，将其放入您的 AllCk() 函数中

 $("input[id='rndr-all']").is(":checked") ? 
                       $("input[name='rndr-int-options']").not("#rndr-all").prop('checked', false).prop('disabled', true) :
                       $("input[name='rndr-int-options']").not("#rndr-all").prop('disabled', false);

希望对您有所帮助！

Answer 2

假设 All sapce 复选框是系列中的最后一个复选框，您的 AllCk() 函数应该是这样的：

function AllCk(){
    var spaces = document.getElementsByName("rndr-int-options");
    for (var i = 0; i < spaces.length - 1; i++) {
        if(spaces[i].checked)
            spaces[i].checked = false;
    }
}

当检查所有space复选框时，其他要未选中和禁用的复选框

When check all space checkbox other checkboxes to be unchecked and disabled

javascript

checkbox

unchecked

disabled-input