3

可能重复：
复选框选中所有选项 

<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 个复选框顶部的复选框时，所有复选框都会选中，当我删除我之前选中的复选框时，5 个复选框将删除他们的检查.

样本： 在此处输入图像描述

示例演示非常感谢。

4

4 回答 4

4

检查演示

这将是基本逻辑。

HTML 页面中的ID应该是唯一的.. 尝试改用class

于 2012-10-10T07:14:46.337 回答
1

使用 javascript

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

函数 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;
 }

在您使用 allcheck 框的 php 中

foreach($listArr as $list) {

 echo '<td><input type="checkbox" value="'.$list['id'].'" name="module[]" /></td>';
 }
于 2012-10-10T07:25:04.800 回答
1

尝试这个

<!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>
于 2012-10-10T07:48:39.403 回答
0

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

您可能希望将第一个元素的类创建为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>
于 2012-10-10T09:27:44.510 回答