用jquery来实现正反选选择框checkbox的小示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.2.1.js"></script>
</head>
<body>
<button onclick="changeall()">正选</button>
<button onclick="reverse()">反选</button>
<button onclick="cancel()">取消</button> <table border="5">
<tr>
<td>111</td>
<td><input type="checkbox" class="box"></td>
</tr>
<tr>
<td>222</td>
<td ><input type="checkbox" class="box"></td>
</tr>
<tr>
<td>333</td>
<td><input type="checkbox" class="box"></td>
</tr>
<tr>
<td>444</td>
<td ><input type="checkbox" class="box"></td>
</tr>
</table>
<script>
function changeall() {
$("table input").each(function () { //找到input标签后进行遍历 把所有的input都加上checked 选中状态
$(this).prop("checked",true); })
}
function cancel() { //找到input标签后进行遍历 把所有的input都取消checked状态
$("table input").each(function () {
$(this).prop("checked",false);
})
}
function reverse() {
$("table input").each(function () { //遍历循环input
if ($(this).prop("checked")){ // 如果有checked
$(this).prop("checked",false); // 用false取消
}
else { //如果没有
($(this).prop("checked", true)); //加上checked状态
}
})
}
</script>
</body>
</html>
用jquery来实现正反选选择框checkbox的小示例的更多相关文章
- 基于jQuery美化联动下拉选择框
今天给大家介绍一款基于jQuery美化联动下拉选择框.这款下下拉选择框js里自带了全国所有城市的数数库.下拉选择框适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲 ...
- jquery.chosen.js下拉选择框美化插件项目实例
由于之前使用的bootstrap-select插件是建立在bootstrap基础上的,实际使用到项目中的时候,与我们使用的ace-admin(基于bootstrap)存在样式冲突,导致下拉框的样式发生 ...
- jquery如何实现动态增加选择框
jquery如何实现动态增加选择框 一.总结 一句话总结:用jquery的clone(true)方法. 1.如何在页面中复制amazeui加了特效的标签? amazeui中的控件带js方法,不知道那部 ...
- jquery下的正反选操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- [jQuery编程挑战]004 针对选择框词典式排序
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8&quo ...
- input 选择框改变背景小技巧
最近在项目中遇到一个问题,想要改变input选择框的背景,然而,令我没有想到的是,竟然无法直接改变背景的颜色 通常情况下:我们都可以通过改变元素的 background-color 的值来改变元素的背 ...
- JQuery Mobile - 动态修改select选择框的选中项
<label for="day">选择天</label> <select name="day" id="day" ...
- jQuery 全选 正反选
<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript&quo ...
- FancySelect – 更好用的 jQuery 下拉选择框插件
FancySelect 这款插件是 Web 开发中下拉框功能的一个更好的选择.FancySelect 使用方便,只要绑定页面上的任何 Select 元素,并调用就 .fancySelect() 就可以 ...
随机推荐
- 多态实现的原理------新标准c++程序设计
“多态”的关键在于通过基类指针或引用调用一个虚函数时,编译时不确定到底调用的是基类还是派生类的函数,运行时才确定.例子: #include<iostream> using namespac ...
- 《Servlet和jsp学习指南》 笔记2
chapter 13 请求和响应的装饰 初步了解Decorator模式: 在不修改一个对象的类的源码的情况下,装饰这个对象的行为. chapter 14 异步处理 异步Servlet和Filter,只 ...
- day4学python 字符编码转换+元组概念
字符编码转换+元组概念 字符编码转换 #coding:gbk //此处必声明 文件编码(看右下角编码格式) #用来得到python默认编码 import sys print(sys.getdefaul ...
- kali linux之选择和修改exp与windows后渗透
网上公开的exp代码,选择可信赖的exp源,exploit-db,securityfocus,searchsploit,有能力修改exp(python,perl,ruby,c,c++.......) ...
- 80端口被system（pid=4）占用
1.查看80端口被哪个进程占用,cmd->netstat -ano | findstr 80 2.cmd->tasklist列出当前运行中的进程,或在任务管理器中查看pid为4的进程. 经 ...
- 51nod1258 序列求和 V4（伯努利数+多项式求逆）
题面 传送门 题解 不知道伯努利数是什么的可以先去看看这篇文章 多项式求逆预处理伯努利数就行 因为这里模数感人,所以得用\(MTT\) //minamoto #include<bits/stdc ...
- hadoop的maven地址
https://mvnrepository.com/artifact/org.apache.hadoop
- CentOS71611部署Django
web.conf <VirtualHost *:> WSGIScriptAlias / /var/www/datacn/datacn/wsgi.py Alias /static/ /var ...
- SQL Server为啥使用了这么多内存？
原文地址:http://support.microsoft.com/gp/anxin_techtip6/zh-cn SQL Server为啥使用了这么多内存? SQL Server的用户,常常会发现S ...
- Sql server if-else以及switch
--相当于C#中的if-else 根据levle列的值来判断自定义列显示的内容--要求then后面的数据类型必须一致 select * ,头衔=case when [levle]=1 then '菜鸟 ...