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 。

在这里你必须检查两个条件;选中主复选框并选中所有子复选框时。因此，当选中main复选框时，应检查所有复选框。同样，当选中所有子复选框时，也应检查主复选框。你必须处理这两种情况。

有两种方法：

方法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添加到主复选框，并将class 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 1.9.1 的最新版jQuery。因此脚本中的方法发生了变化。而不是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-snippet添加到您的页面

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

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

4 个答案: