jquery实现全选、反选、不选

时间:2023-01-22 13:31:55

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>jquery实现全选、反选、不选</title>
<script src="jquery-1.9.1.js"></script>
<script>
function checkAll(){
$(":checkbox").prop("checked",true );
}
function checkNo(){
$(":checkbox").prop("checked",false);
}
function checkRev(){
$.each($(":checkbox"),function(){
$(this).prop("checked",!$(this).prop("checked"));
});
}

$(function(){
var sec=$("body").append("<div></div>")//创建一个div追加到body里面
var input="";//创建一个空的变量
var arr=["井雨轩","小草","井小露","annie"];//创建一个数组,存放各个选项
for(var i=0;i<4;i++){
var index=i+1;
input+="<input type='checkbox' name='标题"+index+ "'value="+arr[i]+">"+arr[i]+"<br>";
}//把从0到4每一个创建的input收集到空变量里面
sec.append(input);//再把这些收集到的所有input追加到div里面
sec.append("<button onclick='checkAll()'>全选</button>");//创建全选按钮,并追加到div里面
sec.append("<button onclick='checkNo()'>全不选</button>");//创建全不选按钮,并追加到div里面
sec.append("<button onclick='checkRev()'>反选</button>");//创建反选按钮,并追加到div里面
});
</script>
</head>
<body>
</body>
</html>

jquery实现全选、反选、不选的更多相关文章

  1. JQ实现复选框的全选反选不选

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. wpf--------------datagrid全选反选 多选进行删除操作 前后台

    前台绑定 <DataGrid.Columns> <DataGridTemplateColumn > <DataGridTemplateColumn.HeaderTempl ...

  3. JQuery 全选 反选 获取Table 中指定td的元素值

    //全选 function initTableCheckbox() { var $thr = $('table thead tr'); var $checkAllTh = $('<th>& ...

  4. Android开发 ---基本UI组件5:监听下拉选项,动态绑定下拉选项、全选&sol;反选,取多选按钮的值,长按事件,长按删除,适配器的使用,提示查询数据,activity控制多按钮

    效果图: 效果描述: 1.当点击 1 按钮后,进入选择城市的页面,会监听到你选中的城市名称:动态为Spinner绑定数据 2.当点击 2 按钮后,进入自动查询数据页面,只要输入首字母,就会动态查找以该 ...

  5. jQuery实现全选、全不选、反选

    如图,需要使用jQuery实现全选.全不选.反选功能: 核心代码: 全选 $("#check_all").click(function(){ $("input:check ...

  6. jQuery全选&sol;反选checkbox

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. python&colon; jquery实现全选 反选 取消

    引入这个jquery-1.12.4.js jquery实现全选 反选 取消 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitio ...

  8. 利用jQuery实现CheckBox全选&sol;全不选&sol;反选

    转自:http://www.cnblogs.com/linjiqin/p/3148259.html jQuery有些版本中实现CheckBox全选/全不选/反选会有bug,经测试jquery-1.3. ...

  9. jquery的全选&sol;全不选&sol;反选以及attr添加checked属性失败的解决办法

    如下图: <head> <title></title> <style type="text/css"> div { border: ...

随机推荐

  1. sql中的inner join &comma;left join &comma;right join

    左连接LEFT JOIN, 也就是说,左外连接的含义是限制连接关键字右端的表中的数据必须满足连接条件,而不关左端的表中的数据是否满足连接条件,均输出左端表中的内容.不满足连接条件的 ,连接字段栏位将对 ...

  2. Css深入理解之浮动&lowbar;慕课网课程笔记

    前言 这篇是在慕课网上跟着张鑫旭重走CSS之路的第三篇学习笔记了,主要是学习float属性,闲话少说,下面进入正文. float的历史 要想了解一个东西,我们还是需要从本质去了解它,那么我们就需要问一 ...

  3. iOS中保证线程安全的几种方式与性能对比

    来源:景铭巴巴 链接:http://www.jianshu.com/p/938d68ed832c 一.前言 前段时间看了几个开源项目,发现他们保持线程同步的方式各不相同,有@synchronized. ...

  4. ButterKnife你需要知道的点

    ButterKnife,这个方便findViewById而使用的库,无数的应用在使用它,以注解来实现的他,对应用的性能影响几乎可以忽略,可以放心使用. 使用: compile 'com.jakewha ...

  5. c&plus;&plus;之模板

    . 函数模板 普通函数 void Swap(int &, int &); 模板函数 template <typename T> void Swap(T &, T & ...

  6. Jrebel热部署配置完整教程&lpar;IntelliJ IDEA、Jrebel、spring boot、springboot、eclipse、Tomcat&rpar;

    标签:IntelliJ IDEA.Jrebel.spring boot.springboot.eclipse.Tomcat1.安装插件并激活插件安装参考:http://blog.csdn.net/u0 ...

  7. Egret学习笔记 &lpar;Egret打飞机-9&period;子弹对敌机和主角的碰撞&rpar;

    运行起来,虽然主角飞机和敌机都在互相发射子弹,但是子弹打中了就和没打中效果是一样的.. 这一章我们就来处理子弹和飞机的碰撞问题. 我们所有的操作都是基于Main这个容器来做的.所以我就把这个处理放到M ...

  8. Go数组和切片定义和初始化

    1 前言 切片是动态数组,数组数组是按值赋值,切片是按地址赋值(引用) 2 代码 2.1 数组初始化 func basic_array(){ //var arr2 = [3]int{2,4,6} // ...

  9. &lbrack;Spark&rsqb;&lbrack;Python&rsqb;Wordcount 例子

    [training@localhost ~]$ hdfs dfs -cat cats.txt The cat on the matThe aardvark sat on the sofa[traini ...

  10. Fix&colon; Windows Script Host access is disabled on this machine

    If you receive this Windows Script Host access is disabled on this machine, Contact your administrat ...