jquery处理checkbox(复选框)是否被选中实例代码


Posted in jQuery onJune 12, 2017

jquery处理checkbox(复选框)是否被选中

现在如果一个复选框被选中,是用checked=true,checked="checked"也行

要用prop代替attr会更好,虽然在jQuery1.6之前版本的attr()方法能正常使用,但是现在必须使用prop()方法代替

 实例代码:

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8"/>
<title>checkbox</title>
</head>
<body>

<input type="button" id="btn1" value="全选">
<input type="button" id="btn2" value="取消全选">
<input type="button" id="btn3" value="选中所有奇数">
<input type="button" id="btn4" value="反选">
<input type="button" id="btn5" value="获得选中的所有值">

<input type="checkbox" value="checkbox1"/>
<input type="checkbox" value="checkbox2"/>
<input type="checkbox" value="checkbox3"/>
<input type="checkbox" value="checkbox4"/>
<input type="checkbox" value="checkbox5"/>

<script src="js/jquery-3.2.0.min.js"></script>
<script>
$(function(){

var checkbox = $("input[type=checkbox]");

$("#btn1").on("click",function(){
checkbox.prop("checked",true);
});

$("#btn2").on("click",function(){
checkbox.prop("checked",false);
});

$("#btn3").on("click",function(){
$("input[type=checkbox]:even").prop("checked",true);
});

$("#btn4").on("click",function(){
checkbox.each(function(){
if($(this).prop("checked")){
$(this).prop("checked",false);
}else{
$(this).prop("checked",true);
}
});
});

$("#btn5").on("click",function(){
var str = "";
$("input[type=checkbox]").each(function(){
if($(this).prop("checked")){
str += $(this).val() + ",";
}

});
console.log(str);
});

});
</script>


</body>
</html>

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

jQuery 相关文章推荐
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
Mar 23 jQuery
为JQuery EasyUI 表单组件增加焦点切换功能的方法
Apr 13 jQuery
详谈jQuery中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
jquery实现图片轮播器
May 23 jQuery
jQuery导航条固定定位效果实例代码
May 26 jQuery
jQuery实现菜单栏导航效果
Aug 15 jQuery
一个有意思的鼠标点击文字特效jquery代码
Sep 23 jQuery
jQuery实现的事件绑定功能基本示例
Oct 11 jQuery
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
Mar 28 jQuery
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
利用jquery和BootStrap实现动态滚动条效果
Dec 03 jQuery
jQuery实现广告显示和隐藏动画
Jul 04 jQuery
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
Jun 12 #jQuery
jquery与js实现全选功能的区别
Jun 11 #jQuery
jQuery 表单序列化实例代码
Jun 11 #jQuery
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
Jun 11 #jQuery
jQuery复合事件结合toggle()方法的用法示例
Jun 10 #jQuery
jQuery复合事件用法示例
Jun 10 #jQuery
jQuery简单绑定单个事件的方法示例
Jun 10 #jQuery
You might like
php下目前为目最全的CURL中文说明
2010/08/01 PHP
通过JavaScript或PHP检测Android设备的代码
2011/03/09 PHP
php自定义函数截取汉字长度
2014/05/15 PHP
php自定义函数实现汉字转换utf8编码的方法
2016/09/29 PHP
PHP基于SimpleXML生成和解析xml的方法示例
2017/07/17 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
js 页面关闭前的出现提示的实现代码
2011/05/25 Javascript
jquery 延迟执行实例介绍
2013/08/20 Javascript
js简单实现HTML标签Select联动带跳转
2013/10/23 Javascript
js阻止冒泡及jquery阻止事件冒泡示例介绍
2013/11/19 Javascript
详解JavaScript中Hash Map映射结构的实现
2016/05/21 Javascript
AngularJS  自定义指令详解及实例代码
2016/09/14 Javascript
从0开始学Vue
2016/10/27 Javascript
值得分享的Bootstrap Table使用教程
2016/11/23 Javascript
用jQuery.ajaxSetup实现对请求和响应数据的过滤
2016/12/20 Javascript
手把手教你把nodejs部署到linux上跑出hello world
2017/06/19 NodeJs
vue 动态改变静态图片以及请求网络图片的实现方法
2018/02/07 Javascript
Vue2.0学习系列之项目上线的方法步骤(图文)
2018/09/25 Javascript
在vue中阻止浏览器后退的实例
2019/11/06 Javascript
浅谈django model postgres的json字段编码问题
2018/01/05 Python
python一键去抖音视频水印工具
2018/09/14 Python
python3 json数据格式的转换(dumps/loads的使用、dict to str/str to dict、json字符串/字典的相互转换)
2019/04/01 Python
通过PYTHON来实现图像分割详解
2019/06/26 Python
python mqtt 客户端的实现代码实例
2019/09/25 Python
xadmin使用formfield_for_dbfield函数过滤下拉表单实例
2020/04/07 Python
python:解析requests返回的response(json格式)说明
2020/04/30 Python
Python自带的IDE在哪里
2020/07/01 Python
Python基于pyjnius库实现访问java类
2020/07/31 Python
python将字典内容写入json文件的实例代码
2020/08/12 Python
浅析Python 责任链设计模式
2020/09/11 Python
详解Python流程控制语句
2020/10/28 Python
CSS3 :default伪类选择器使用简介
2018/03/15 HTML / CSS
中介公司区域经理岗位职责范本
2014/03/02 职场文书
团组织推优材料
2014/12/29 职场文书
我是特种兵观后感
2015/06/11 职场文书
Oracle数据库中通用的函数实例详解
2022/03/25 Oracle