Question

我遍历一个数组来创建一些复选框，如下所示：

<div class="funnels">
    <label class="checkbox-inline">
    <input type="checkbox" id="selectall"> onClick="selectAll(this)" />All funnels
    </label>
    <?php foreach ($funnels as $funnel) { ?>
        <label class="checkbox-inline">
        <input type="checkbox" name="funnel[]" id ="funnel" value="<?php echo $funnel ?>" ><?php echo $funnel ?>
        </label>
    <?php } ?>
</div>

单击全部复选框后，我使用以下javascript选中所有复选框。我需要做的是在取消选中其他复选框之后取消选中all复选框。任何帮助将不胜感激。

  function selectAll(source) {
         checkboxes = document.getElementsByName('funnel[]'); 
                for(i=0;i<checkboxes.length;i++)
                checkboxes[i].checked = source.checked;
    }

Answer 1

您还需要将change事件处理程序绑定到其他checkbox元素。

我还建议您使用不引人注意的事件处理程序，请参阅addEventListener()

＆＃13;

document.addEventListener("DOMContentLoaded", function(event) {
  var checkboxes = document.getElementsByName('funnel[]'),
    selectall = document.getElementById('selectall');


  for (var i = 0; i < checkboxes.length; i++) {
    checkboxes[i].addEventListener('change', function() {
      //Conver to array
      var inputList = Array.prototype.slice.call(checkboxes);

      //Set checked  property of selectall input
      selectall.checked = inputList.every(function(c) {
        return c.checked;
      });
    });
  }


  selectall.addEventListener('change', function() {
    for (var i = 0; i < checkboxes.length; i++) {
      checkboxes[i].checked = selectall.checked;
    }
  });

});

＆＃13;

<label> <input type="checkbox" id="selectall"  />All funnels</label>
<br><label> <input type="checkbox" name="funnel[]" value="1">1</label>
<br><label> <input type="checkbox" name="funnel[]" value="2">2</label>
<br><label> <input type="checkbox" name="funnel[]" value="2">3</label>

＆＃13;

Refrences

Answer 2

id应该是唯一的;所以考虑使用class而不是id。

function selectAll(source) {
         checkboxes = document.querySelector('funnel[]'); 
                for(i=0;i<checkboxes.length;i++)
                checkboxes[i].checked = source.checked;
    }

function selectAll(source) {

  var checkboxes = document.querySelectorAll('.funnel'); 

  for(i=0;i<checkboxes.length;i++)
     checkboxes[i].checked = source.checked;
}
    
function unSelect(element) {
if(!element.checked){
// uncheck "select all" when 1,2 or 3 is unchecked
  document.querySelector('#selectall').checked = false;
  // if you want to unselect also the others checkboxes of the class "funnel",uncomment the following block
  /*var others = document.querySelectorAll('.funnel'); 

  for(i=0;i<others.length;i++)
     others[i].checked = false;*/
  
}else{
// check "select all" when 1, 2, 3 is checked
  document.querySelector('#selectall').checked = true;
}
  
}

<input type="checkbox" onclick="selectAll(this)" id="selectall"/> all select <br>

<input type="checkbox" class = "funnel" onclick="unSelect(this)"/> 1 <br>
<input type="checkbox" class = "funnel" onclick="unSelect(this)"/> 2 <br>
<input type="checkbox" class = "funnel" onclick="unSelect(this)"/> 3 <br>

取消选中其中一个复选框时，取消选中全选复选框

2 个答案: