如何在标题中使用单独的复选框选择/取消选择生成的复选框行

使用

$('input[name=checkall]').click(function(){
    var checked = $('input[name=checkall]').is(':checked');
    if (checked) {
        $('input:checkbox').attr('checked','checked');
    } else {
        $('input:checkbox').attr('checked','');
    }
});

您可以使用jQuery。

这里需要检查两个条件;当主复选框被选中以及所有子复选框被选中时。所以当主复选框被选中时，所有的复选框都应该被选中。同样，当所有子复选框都被选中时，主复选框也应该被选中。你必须注意这两种情况。

有两个方法:

方法1(使用复选框名称)

jQuery(document).ready(function () {
  jQuery("input[name=checkall]").click(function () {
    jQuery('input[name=checkall]').attr('checked', this.checked);
    jQuery('input[name=checkbox]').attr('checked', this.checked);
  });

  // if all checkbox are selected, check the selectall checkbox
  // and viceversa
  jQuery("input[name=checkbox]").click(function(){
    if(jQuery("input[name=checkbox]").length == jQuery("input[name=checkbox]:checked").length) {
        jQuery("input[name=checkall]").attr("checked", "checked");
    } else {
        jQuery("input[name=checkall]").removeAttr("checked");
    }
  });
});

方法2(使用复选框类)

您必须为主标题复选框添加一个类，并为所有其他复选框添加另一个类。所以你的脚本将是:

jQuery(".selectall").click(function () {
    jQuery('.selectall').attr('checked', this.checked);
    jQuery('.child_checkbox').attr('checked', this.checked);
});
// if all checkbox are selected, check the selectall checkbox
// and viceversa
jQuery(".child_checkbox").click(function(){
    if(jQuery(".child_checkbox").length == jQuery(".child_checkbox:checked").length) {
        jQuery(".selectall").attr("checked", "checked");
    } else {
        jQuery(".selectall").removeAttr("checked");
    }
});

现在将类selectall添加到主复选框中，将类child_checkbox添加到循环中的所有子复选框中。所以你的HTML就是

echo "<table width='auto' cellpadding='1px' cellspacing='0px' border=1 align='center'>
<tr>
<th align='center'><input name='checkall' type='checkbox' value='' class='selectall'/></th>
<th align='center'>Remedy Ticket No.</th>
<th align='center'>Phone/Incident No.</th>
<th align='center'>Category 2</th>
<th align='center'>Category 3</th>
<th align='center'>Status</th>
<th align='center'>Create Date</th>
<th align='center'>Severity</th>
<th align='center'>Ban Type</th>
<th align='center'>Resolved Date</th>
</tr>"; 
while($info = mysql_fetch_array($myData)) 
{ 
echo "<form action='getdata.php' method='post'>";
    echo"<tr>"; 
    echo "<td align='center'>" . "<input type='checkbox' name='checkbox' value='' class='child_checkbox'/></td>";
    echo  "<td align='center'>" . $info['ars_no'] . "<input type=hidden name=ars_no value=" . $info['ars_no'] . " </td>";
    echo  "<td align='center'>" . $info['phone_number'] . "<input type=hidden name=phone_number value=" . $info['phone_number'] . " size='11' maxlength='11' /> </td>"; 
    echo  "<td align='center'>" . $info['category_1'] . "<input type=hidden name=category_1 value=" . $info['category_1'] . "' /> </td>"; 
    echo  "<td align='center'>" . $info['category_2'] . "<input type=hidden name=category_2 value=" . $info['category_2'] . "' /> </td>";
    echo  "<td align='center'>" . $info['status'] . "<input type=hidden name=status value=" . $info['status'] . "' /> </td>"; 
    echo  "<td align='center'>" . $info['create_date'] . "<input type=hidden name=create_date value=" . $info['create_date'] . "' /> </td>";
    echo  "<td align='center'>" . $info['trouble_type_priority'] . "<input type=hidden name=trouble_type_priority value=" . $info['trouble_type_priority'] . " size='1' maxlength='1' /> </td>"; 
    echo  "<td align='center'>" . $info['ban_type'] . "<input type=hidden name=ban_type value=" . $info['ban_type'] . " size='1' maxlength='1' /> </td>";
    echo "</tr>"; 
}

更新:

我想你使用的是最新版本的jQuery jQuery 1.9.1。脚本中的方法发生了变化。用prop代替attr。该方法已折旧。jQuery attri -vs-prop 所以你的脚本方法1(使用复选框名称)应该改为:

jQuery(document).ready(function () {
  jQuery("input[name=checkall]").click(function () {
    jQuery('input[name=checkall]').prop('checked', this.checked);
    jQuery('input[name=checkbox]').prop('checked', this.checked);
  });

  // if all checkbox are selected, check the selectall checkbox
  // and viceversa
  jQuery("input[name=checkbox]").click(function(){
    if(jQuery("input[name=checkbox]").length == jQuery("input[name=checkbox]:checked").length) {
        jQuery("input[name=checkall]").prop("checked", true);
    } else {
        jQuery("input[name=checkall]").prop("checked", false);
    }
  });
});

如果你正在使用类方法2(使用复选框类)，那么它应该是:

jQuery(document).ready(function () {
    jQuery(".selectall").click(function () {
        jQuery('.selectall').prop('checked', this.checked);
        jQuery('.child_checkbox').prop('checked', this.checked);
    });
    // if all checkbox are selected, check the selectall checkbox
    // and viceversa
    jQuery(".child_checkbox").click(function(){
        if(jQuery(".child_checkbox").length == jQuery(".child_checkbox:checked").length) {
            jQuery(".selectall").prop("checked", true);
        } else {
            jQuery(".selectall").prop("checked", false);
        }
    });
});

也请正确格式化你的HTML似乎是缺少引号周围的输入属性值。即使它不严格，但最好遵循它。

希望这对你有帮助

尝试使用jQuery。

• 添加id到标题复选框:<input id="checkall" type="checkbox" value='' />
• 添加类到其他复选框:<input class="chkBox" type="checkbox" value='' />

• 添加jQuery库链接

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

• 添加JS-snippet到您的页面

  <script language="Javascript">
  $(function () {
      $('#checkall').on('click', function () {
          $('.chkBox').attr('checked', true);
      });
  });
  </script>
  

您将需要使用javascript。这个复选框看起来像这样:

<input name="CheckAll" type="checkbox" id="CheckAll" value="Y"  onClick="ClickCheckAll(this);"> 

动态创建的复选框应该是这样的:

<td align="center"><input type="checkbox" name="chkDel[]"  id="chkDel<?=$i;?>"  value="<?=$info["ars_no"];?>"></td>

然后使用这个javascript:

<script language="JavaScript">  
function ClickCheckAll(vol)  
{  
var i=1;  
for(i=1;i<=document.frmMain.hdnCount.value;i++)  
{  
if(vol.checked == true)  
{  
eval("document.frmMain.chkDel"+i+".checked=true");  
}  
else  
{  
eval("document.frmMain.chkDel"+i+".checked=false");  
}  
}  
}  
</script>

你还必须将你的while循环改为:

<?php 
$i = 0;  
while($objResult = mysql_fetch_array($objQuery))  
{  
$i++;  
?>