实现checkebox全选取消操作

最新推荐文章于 2025-11-27 22:06:18 发布

原创最新推荐文章于 2025-11-27 22:06:18 发布 · 53 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #checkbox #jquery #php #html5

这篇博客介绍了两种方法来实现批量选择或取消选择表格中的复选框。第一种是使用纯JavaScript，通过获取同一组复选框并设置它们的选中状态。第二种方法利用jQuery，通过ID选择器快速改变所有相关复选框的选中状态。示例代码在JSP页面中展示，使用了forEach循环来遍历数据并生成表格。

方法一：

javascript代码：

function checkedChild(obj,index){ 
    var checkBoxs = document.getElementsByName("carId"+index); 
    if(obj.checked){ 
        for ( var i = 0; i < checkBoxs.length; i++){ 
            checkBoxs[i].checked = true; 
        } 
    }else{ 
        for ( var i = 0; i < checkBoxs.length; i++){ 
            checkBoxs[i].checked = false; 
        } 
    } 
}

方法二：

jQuery代码：

function checkedChild(obj,index){ 
    $("#tr"+ index + " :checkbox").prop("checked", obj.checked); 
}

jsp页面：

  <c:forEach item="${result}" var = "wb" varStatus="vs">
      <tr id="tr${vs.count}">
          <td align="center">
          <input name="waybillNo" type="checkbox" value="${wb.waybillNo}" onclick="checkedChild(this,'${vs.count}')"></td><td>  
          <div class="tab_txt">
              <ul class="yd_car">
                  <c:forEach items="${wb.carVOs}" var="car">
                      <li><input type="checkbox" name="carId${vs.count}" value="${car.id}" class="car_class_${vs.index}"></li>
                  </c:forEach>
              </ul>  
          </div>
          </td>
      </tr>
  </c:forEach>