复选框切换全选/取消全选问题答案

【问题标题】：checkbox toggle select all/unselect all problem复选框切换全选/取消全选问题
【发布时间】：2011-09-09 18:15:42
【问题描述】：

您好，我找到了一个脚本，它使用复选框来全选/取消全选 checkboxex，我在这里找到了一个工作示例 http://jsfiddle.net/ThiefMaster/HuM4Q/

问题是当我试图将它集成到我自己的 html 中时。它不再起作用了，这是我的代码：

javascript：

<head>
<script>
$('#checkAll').click(function() {
    if(this.checked) {
        $('input:checkbox').attr('checked', true);
    }
    else {
        $('input:checkbox').removeAttr('checked');
    }
});

$('input:checkbox:not(#checkAll)').click(function() {
    if(!this.checked) {
        $('#checkAll').removeAttr('checked');
    }
    else {
        var numChecked = $('input:checkbox:checked:not(#checkAll)').length;
        var numTotal = $('input:checkbox:not(#checkAll)').length;
        if(numTotal == numChecked) {
            $('#checkAll').attr('checked', true);
        }
    }
});
</script>
</head>

这是我的html：

<h2>Courses</h2>
<?php 
$attributes = array('name' => 'list','id' => 'form' );
echo form_open('courses/edit',$attributes);?>

<table class="data display datatable" id="example">
    <thead>
        <tr>
          <th>ID</th>
          <th>Title</th>
          <th>Description</th>
          <th>Units</th>
          <th>Notes</th>
          <th><input type="checkbox" id="checkAll"></th>
        </tr>
    </thead>
    <tbody> 
<?php foreach($query->result_array() as $row): ?>
        <tr class="even gradeC">
            <td><?php echo anchor('courses/details/'.$row['courseID'],$row['courseID']);?></td>
            <td><?php echo $row['courseTitle'];?></td>
            <td><?php echo $row['courseDesc'];?></td>
            <td><?php echo $row['courseUnits'];?></td>
            <td><?php echo $row['courseNotes'];?></td>
            <td><input type="checkbox" name="checkID[]" id="checkID" value="<?php echo $row['courseID'];?>"/></td>
        </tr>
<? endforeach; ?>
    </tbody>
</table>

【问题讨论】：

标签： php javascript checkbox selectall unselect

【解决方案1】：

尝试修复这条线：

<td><input type="checkbox" name="checkID[]" id="checkID" value="<?php echo $row['courseID'];?>"/></td>

id 属性应该是唯一的，例如，只有一个元素的 id 应该是“checkID”，而不是每一行。尝试完全删除该属性或使其每行唯一，以查看您的 javascript 是否自行排序。

另外，你需要在顶部，在你的头脑中这样一行：

  <script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script>

【讨论】：

我已经在标题中包含 jquery.. 但仍然无法正常工作
我使用 checkID[] 因为我的数据来自数据库..这就是为什么我只是循环它..有没有办法解决这个问题？
name= 属性很好，我指的是 id= 属性 - 这应该是唯一的。取出 id="checkID"。

【解决方案2】：

那个脚本使用了 jQuery。确保在页面中包含 jQuery 脚本。

【讨论】：