javascript - 选择复选框不适用于 javascript

Question

我有一个 html 复选框，单击后选中所有复选框。但不幸的是，它不起作用。这里有什么问题？

javascript代码：

<script language="JavaScript">
function toggle(source) {
 checkboxes = document.getElementsByName('contact_no');
  for(var i=0, n=checkboxes.length;i<n;i++) {
  checkboxes[i].checked = source.checked;
  }
}</script>

php代码：

echo "<table width='100%' cellpadding='0' cellspacing='0'>";
echo "<tr>";
echo "<td class='tdhead' valign='top' width='100'><b>Contact Name</b></td>";    
echo "<td class='tdhead' valign='top' width='100'><b>Contact 
Number</b>";                
echo '<input type="checkbox" onClick="toggle(this)" /> Toggle 
All<br/>';              
echo "</tr>";


while($row = mysqli_fetch_array($result))
{  
  $gid = $row['gid'];
  $contact_name = $row['contact_name'];  
  $contact_no =  $row['contact_no'];
  echo "<tr>";              
  echo "<td class='tdhead2' valign='top'>$contact_name</td>";
  echo "<td class='tdhead2' ><input type='checkbox' value='$gid' name='contact_no[]'' 
  />&nbsp;&nbsp;$contact_no</td>";                  
  echo "</tr>";
}

echo "</table>";

Answer 1

每个元素的名称是：contact_no[]但是在您的 JS 代码中，您getElementsByName('contact_no')- 添加[]到 getElementsByName 调用。

Answer 2

为了安全起见，您应该像下面的代码一样处理事件对象

<script type="text/javascript">
function toggle(evt) {
 evt = window.event || evt;
 var source = evt.srcElement || evt.currentTarget 

 checkboxes = document.getElementsByName('contact_no');
  for(var i=0, n=checkboxes.length;i<n;i++) {
  checkboxes[i].checked = source.checked;
  }
}
</script>

Answer 3

另一种解决方案是，您可以在要执行全选操作的主复选框上添加 Id 属性，并与其他复选框的类属性相同。

例如

$(document).ready(function(){
  $('.selectall').change(function({
    var id = $(this).attr('id');

    if ($(this)is(":checked")) {
      $("." + id).attr('checked','checked');

    } else {
      $("." + id).attr('checked','');
    }
  }))
})

我希望这段代码可以帮助你

Answer 4

<script language="JavaScript">
    function toggle(source)
    {
        checkboxes = document.getElementsByName('contact_no');
        for(var i=0, n=checkboxes.length;i<n;i++)
        {
            contact_no[i].checked = source.checked;
        }
    }
</script>