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

Question

有人可以帮我写代码吗，下面的代码将在查询后生成行，每行都有自己的复选框...我在标题中也有一个复选框...我想要检查或选择所有行只有标题中的复选框，但同时我仍然应该能够每行选择一个复选框

echo "<table width='auto' cellpadding='1px' cellspacing='0px' border=1 align='center'>
<tr>
<th align='center'><input name=checkall type=checkbox value='' /></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=" . " </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  "<td align='center'>" . "<input type=text name=resolved_date value=" . $info['resolved_date'] . " size='8' maxlength='8' /> </td>";

Answer 1

用这个

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

});

Answer 2

为此，您将需要使用 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++;  
?>  

Answer 3

您可以为此使用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。所以脚本中的方法发生了变化。而不是attr 你必须使用prop. attr 方法已被折旧。您可以查看此链接以获取有关该jQuery attr-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 似乎缺少输入属性值的引号。即使它不严格但最好遵循。

希望这可以帮助 ：）

Answer 4

尝试使用 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 片段添加到您的页面

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