Question

可能重复：
checkbox check all option

<form action='ppc_logistic-control_number.php' target='_blank' method='post'>
<b>Sample Program</b><br>
<input type='checkbox'>
<?php
for($i=0;$i<5;$i++)
{
print"<input name='checkbox[]' type='checkbox' id='checkbox[]' value='$i->logi_id' value='$i->ppc_id' style='margin-left:-5px'><br>";
}                       
?>
<input type="submit" value="submit" name="gen"/>

我需要按顺序放置什么jquery或javascript代码：当我选中复选框顶部的复选框时，所有复选框都会有一个检查，当我删除我之前检查的复选框时，5复选框将删除它们。

样品： enter image description here

示例演示非常感谢你。

Answer 1

<强> Check DEMO

这将是基本逻辑。

HTML页面中的

ID 应该是唯一的。请尝试使用类

Answer 2

使用javascript

<input type="checkbox" value="select" onclick="javascript:checkAll()" name="allbox" class="table_ckbox" /></th>

function checkAll（）

{

for (var i=0;i<document.delete_form.elements.length;i++)
{
    var e=document.delete_form.elements[i];
    if ((e.name != 'allbox') && (e.type=='checkbox'))
    {
        e.checked=document.delete_form.allbox.checked;
    }
}
return false;
 }

在php中你使用allcheck框

foreach($listArr as $list) {

 echo '<td><input type="checkbox" value="'.$list['id'].'" name="module[]" /></td>';
 }

Answer 3

试试这个

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Sample Program</title>
<script src="http://code.jquery.com/jquery-1.7rc2.js"></script>

</head>

<body>
<form action='ppc_logistic-control_number.php' target='_blank' method='post'>
<b>Sample Program</b><br>
<div id="check-b">
<input type='checkbox' id="top-checkbox">
<?php
for($i=0;$i<5;$i++)
{
print"<input name='checkbox[]' type='checkbox' id='checkbox[]' value='$i->logi_id' value='$i->ppc_id' style='margin-left:-5px'><br>";
}                       
?>
<input type="submit" value="submit" name="gen"/>
</div>
</form>
<script type="text/javascript">
$(function(){
    $('#top-checkbox').change(function(){
        var isChecked = $(this).attr("checked");
        if (isChecked) {
        $('#check-b').find(':checkbox').prop('checked', true);   
        }else{
            $('#check-b').find(':checkbox').prop('checked', false);   
        }
    });

});
</script>

</body>
</html>

Answer 4

以下示例显示了基于类的复选和取消选中复选框。

您可能希望将第一个元素的类设为parent，将所有其他元素设为child，以下代码将简化您的工作

注意：将此代码复制并粘贴到html文件中，然后玩游戏，然后您就会对此有所了解。

<html>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
   $(".parent").click(function(){
        var check = $(this).attr('checked');
        if(check=="checked")
        {
         $(".child").attr('checked','checked');
        }
        else
         $(".child").removeAttr('checked');
   });
 });
</script>

<input type="checkbox" name="vehicle1" id="vehicle1" class="parent" value="Bike">Parent<br />
<input type="checkbox" name="vehicle2" id="vehicle2" class="child" value="Car">Child 1<br />
<input type="checkbox" name="vehicle3" id="vehicle3" class="child" value="Car">Child 1<br />
<input type="checkbox" name="vehicle4" id="vehicle4" class="child" value="Car">Child 1<br />
<input type="checkbox" name="vehicle5" id="vehicle5" class="child" value="Car">Child 1<br />

</body>
</html>

使用复选框选中所有复选框

4 个答案: