用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() 就可以 ...
随机推荐
- unix网络编程str_cli使用epoll实现
unix网络编程str_cli使用epoll实现 unix环境高级编程中也有这个函数,都是为了讲解IO多路转接.从本质上来看epoll就是一个改善了的select和poll,本质没发生任何变化,对于构 ...
- HashMap数据结构的C++实现
Hash表在计算机的应用编程中是一种很常用的数据结构,很多算法的实现都离不开它.虽然C++11标准模板库中的有hashmap类型的实现,但在工程实践中,若项目本身使用的是较低版本的C++,或是出于性能 ...
- Promise超时重新请求
export default function (promiseProducer, params, interval, attemptTimes) { interval = typeof interv ...
- 20165219 《Java程序设计》实验一(Java开发环境的熟悉)实验报告
20165219 <Java程序设计>实验一(Java开发环境的熟悉)实验报告 一.实验报告封面 课程:Java程序设计 班级:1652班 姓名:王彦博 学号:20165219 成绩: 指 ...
- Java面向对象之关键字final 入门实例
一.基础概念 1.关键字final可以修饰类.函数.变量. 2.关键字final修饰的类不可以被继承. 3.关键字final修饰的方法不可以被覆盖. 4.关键字final修饰的变量是一个常量,只能被赋 ...
- maven项目运行找不到类的错误
Maven项目 eclipse工具 错误: [INFO] -------------------------------------------------------------[ERROR] CO ...
- CF165D Beard Graph
$ \color{#0066ff}{ 题目描述 }$ 给定一棵树,有m次操作. 1 x 把第x条边染成黑色 2 x 把第x条边染成白色 3 x y 查询x~y之间的黑边数,存在白边输出-1 \(\co ...
- 浅谈PHP的Public、Protected、Private三种方法的区别
public:权限是最大的,可以内部调用,实例调用等.protected: 受保护类型,用于本类和继承类调用.private: 私有类型,只有在本类中使用. <?php error_report ...
- 前端CSS的基本素养
前端开发的三驾马车——html.css.js,先谈谈CSS CSS 前期:解决布局.特效.兼容问题 中级:网站风格的制定.色调.模块.布局方式.交互方式.逻辑设计等 高级:模块命名.类的命名.文件的组 ...
- 洛谷P2679 子串
放题解 题目传送门 放代码