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

<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>

Answer 4

另一个解决方案是，您可以在要从中执行的主复选框中添加Id属性，选择所有操作，并使其与其他复选框的class属性相同。

E.g。

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

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

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

我希望此代码可以帮助您

选择复选框无法使用javascript

4 个答案: