checkbox选中与取消选择

先上代码

<form>你爱好的运动是？<br/><input type="checkbox" name="items" value="足球" />足球<input type="checkbox" name="items" value="篮球" />篮球<input type="checkbox" name="items" value="羽毛球" />羽毛球<input type="checkbox" name="items" value="乒乓球" />乒乓球 <br/><input type="button" id="CheckAll" value="全选" /><input type="button" id="CheckNo" value="全不选" /><input type="button" id="CheckRev" value="反选" /></form>

　　想要实现的是全选，全不选和反选三种效果，其中需要特别注意的是全选按钮这里

<script>$(function(){$("#CheckAll").click(function(){$("input:checkbox").prop("checked","checked");});$("#CheckNo").click(function(){$("input:checkbox").removeAttr("checked");});$("#CheckRev").click(function(){$("input:checkbox").each(function(){this.checked=!this.checked;});});});
</script>

　　请注意，现在使用的是prop(),如果使用attr(),那么就会出现下面这种情况：

选择“全选”按钮后，正常；点击“全不选”，正常；当这个时候再去点击“全选”按钮时，发现代码那里的“checked”=checked,但是页面上没有显示出来；

使用prop()方法后，可以解决此问题；

。。。。没有测浏览器的兼容。。。。

转载于:https://www.cnblogs.com/new-dream-new-hope/p/5285474.html

checkbox选中与取消选择相关推荐

jsTree复选框checkbox选中和节点选择相互独立
jsTree插件仅点击checkbox选中和文本分离和jstree只能点击checkbox选中的实现方法在默认情况下,jstree 每次点击节点都会选中当前节点前的 checkbox jstree ...
elementUI checkbox选中与取消选中
<template><el-checkbox :indeterminate="isIndeterminate" v-model="checkAll&qu ...
checkbox选中和不选中 jqu_jQuery教程之jQuery checkbox（选中和取消选中事件on)
本篇教程介绍了jQuery教程之jQuery checkbox(选中和取消选中事件on),希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入. < $("#btn_ ...
通过js控制layui选择框checkbox的选中、取消选中，以及使用layui实现全选、取消全选的一种方式
js控制选中.取消选中 ,layui实现全选.取消全选 layui版本2.5.x html部分: <form class="layui-form" id="form ...
jQuery操作复选框checkbox技巧总结 ---- 设置选中、取消选中、获取被选中的值、判断是否选中等
jQuery操作复选框checkbox技巧总结 --- 设置选中.取消选中.获取被选中的值.判断是否选中等一.checked属性定义先了解下input标签的checked属性: 1.HTML &l ...
安卓checkbox全选/反选/取消选择
activity_main.xml文件 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/androi ...
android+checkbox全选多选反选取消选择
activity.main <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xm ...
jQuery取消checkbox选中状态
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>jQu ...
datagridview取消默认选中_DataGridView点击空白处和失去焦点后取消选择和关闭默认选择第一行C#Winform...
默认选择第一行,可以通过窗体的Load事件中调用Datagridview的ClearSelection来取消选择也可以设置 Datagridview的CurrentCell = null; 还可以将 ...
易语言一键选中取消选择列表框源码
对选择列表框实现一键选中取消,可以推广到超级列表框等组件. 选中取消选择列表框源码 .版本 2.局部变量 m, , , , 511遇见论坛(bbs.511yj.com) .局部变量 n, , , , ...

checkbox选中与取消选择

checkbox选中与取消选择相关推荐

最新文章

热门文章