html checkbox 实现全选/取消全选

时间:2021-09-14 14:21:05

html checkbox  实现全选/取消全选

<html>
<body> <table border="1">
<tr>
<th><input type="checkbox" onclick="swapCheck()" /></th>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>February</td>
<td>$150</td>
</tr>
</table> <script type="text/javascript"
src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript">
//checkbox 全选/取消全选
var isCheckAll = false;
function swapCheck() {
if (isCheckAll) {
$("input[type='checkbox']").each(function() {
this.checked = false;
});
isCheckAll = false;
} else {
$("input[type='checkbox']").each(function() {
this.checked = true;
});
isCheckAll = true;
}
}
</script> </body>
</html>

效果图:

html checkbox  实现全选/取消全选

html checkbox  实现全选/取消全选

html checkbox 实现全选/取消全选的更多相关文章

  1. Jquery CheckBox复选框 全选&sol;取消全选 最佳实现方式 参考案例

    <input id="chkAll" type="checkbox" />全选/取消全选</div> <asp:Repeater ...

  2. checkbox全选&sol;取消全选

    //checkbox全选/取消全选 $(function() { $("#checkAll").click(function() { if(this.checked){ $(&qu ...

  3. 【转载】checkbox实现全选&sol;取消全选

    比较简单.好理解的写法,做个备注.查看请前往原地址:http://blog.csdn.net/graceup/article/details/46650781 <html> <bod ...

  4. jQuery--checkbox全选&sol;取消全选

    用JavaScript使页面上的一组checkbox全选/取消全选,逻辑很简单,实现代码也没有太难的语法.但使用jQuery实现则更简单,代码也很简洁,精辟! jQuery版本:1.3.2 <h ...

  5. AngularJS--购物车全选&sol;取消全选功能实现

    刚学习angularJS,于是练习写了一个类似于购物车的全选/取消全选的功能,主要实现的功能有: 1.勾选全选checkbox,列表数据全部被勾选,取消同理,用ng-model实现双向绑定: 2.选中 ...

  6. jQuery 复选框全选&sol;取消全选&sol;反选

    jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type ...

  7. Vue 全选&sol;取消全选,反选&sol;取消反选

    这是一个组件: <template> <div> <div> <input type="checkbox" v-model="i ...

  8. jquery checkbox勾选取消勾选的诡异问题

    jquery checkbox勾选/取消勾选的诡异问题jquery checkbox勾选/取消勾选的诡异问题 <form>        你爱好的运动是?<input type=&q ...

  9. js jqery判断checkbox是否选中&comma;全选&comma;取消全选&comma;反选&comma;选择奇数偶数项

    // 一,判断选中 // js var ischecked2 = function(){ // this.checked == true $(document.getElementsByTagName ...

随机推荐

  1. 搭建高可用mongodb集群(四)—— 分片(经典)

    转自:http://www.lanceyan.com/tech/arch/mongodb_shard1.html 按照上一节中<搭建高可用mongodb集群(三)-- 深入副本集>搭建后还 ...

  2. 用dygraphs图表分析xdebug的trace结果

    2015年12月1日 19:44:23 推荐这一篇用百度的ECharts图表工具 本文用到的js图表库: dygraphs 注: 测试数据量 19108个数据点, 最好将数据的量级调小, 这样渲染会很 ...

  3. Effective C&plus;&plus; -----条款46:需要类型转换时请为模板定义非成员函数

    当我们编写一个class template,而它所提供之“与此template相关的”函数支持“所有参数之隐式类型转换”时,请将那些函数定义为“class template内部的friend函数”.

  4. css公共样式

    /* ==================================================================== @ set browser style ======== ...

  5. Unity模型导入的若干问题

    原地址:http://tieba.baidu.com/p/2807225555 我觉得有三点感觉在导出时比较重要的1.单位的设置3dsmax系统单位设置就设成厘米显示单位公制也设成厘米这样在max里的 ...

  6. Java自带工具jstack故障分析的一个案例

    公司的一个web应用项目运行了很长一段时间,达半年之久,前段时间突然出现了服务不可用的情况,所有的请求都不可达,服务彻底挂了.查看tomcat进程还在,cpu使用率低,一时没找着问题,重启了服务.过了 ...

  7. 解析word中的表格

    由于word表格的特殊性,其本身中的数据本来就不够完善,不能够很好的知道其具体的合并.跨行的相关属性,表格的单位可能是PT或者是百分比,并且是共存的,为处理带来了一定的负担,本代码实现了一个将Word ...

  8. Threejs 的场景查看 - 几个交互事件库助你方便查看场景

    Threejs 的场景查看 - 几个交互事件库助你方便查看场景 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致&q ...

  9. &lbrack;原创&rsqb;消灭eclipse中运行启动的错误&colon;&OpenCurlyDoubleQuote;找不到或无法加载主类”问题

    最近一直遇到这个问题且根据网上的文章做法基本无法通过,故将自己的解决步骤记录及分享给大家. 一:环境必须要配置好. 试试在dos界面输入:java.javac 分别这两个命令是否能执行,如果都能执行恭 ...

  10. bootstrap中的明星属性

    1.明星属性 bootstrap中的明星属性 class='text-nowrap' 2.明星代码 $(window).resize(function () { location.reload(); ...