用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() 就可以 ...
随机推荐
- Android学习笔记 TextSwitcher文本切换组件的使用
activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android&qu ...
- firefox 59 无法使用 pac 代理上网
最近装了 firefox,电脑配置不太高,chrome 太吃内存了. 但是发现 SwitchyOmega的 pac 模式无法工作,这篇文章提到了两个思路, 其中network.dns.disableI ...
- property特性
什么是property property是一种特殊属性,访问他时会执行一段功能然后返回值 class People: def __init__(self,name,weight,height): se ...
- spring 学习（四）: spring 的 jdbcTemplate 操作
spring 学习(四): spring 的 jdbcTemplate 操作 spring 针对 javaee 的每一层,都提供了相应的解决技术,jdbcTemplate 的主要操作在 dao 层. ...
- 洛谷P4493 [HAOI2018]字串覆盖（后缀自动机+线段树+倍增）
题面 传送门 题解 字符串就硬是要和数据结构结合在一起么--\(loj\)上\(rk1\)好像码了\(10k\)的样子-- 我们设\(L=r-l+1\) 首先可以发现对于\(T\)串一定是从左到右,能 ...
- I/O(输入/输出)---序列化与反序列化
概念: 序列化就是将对象的状态存储到特定的介质中的过程,也就是将对象状态转换为可保持或传输格式的过程. 反序列化则是从特定存储介质中将数据重新构建对象的过程.可以将存储在文件上的对象信息读取,然后重新 ...
- JDBC解决中文乱码
本文转载自https://www.liyongzhen.com/jdbc/jdbc-character 在使用JDBC开发的过程中,通常会遇到中文保存到数据库乱码的问题. 这个问题的产生有3个方面: ...
- 【离散数学】 SDUT OJ 1.3按位AND和按位OR
1.3按位AND和按位OR Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Problem Description 已知长度为 ...
- c#几种数据库的大数据批量插入（SqlServer、Oracle、SQLite和MySql）
这篇文章主要介绍了c#几种数据库的大数据批量插入(SqlServer.Oracle.SQLite和MySql),需要的朋友可以了解一下. 在之前只知道SqlServer支持数据批量插入,殊不知道Ora ...
- java 实现word 转 pdf
java 实现word 转 pdf 不知道网上为啥道友们写的这么复杂 ,自己看到过一篇还不错的 , 自己动手改了改 ,测试一下可以用 , 希望大家可以参考一下 , 对大家有帮助 1.引入jar ...