Question

我有一组复选框表示房屋空间，最后一个复选框是房子所有空间。当我选中“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;
    }
}

选中所有空格复选框时，要取消选中并禁用其他复选框

2 个答案: