checkbox的change事件可监听是否选中状态,也可添加onclick事件。

var dom=$('.checkbox');

1. 判断checkbox是否被选中

   var dom=$('.checkbox');

    dom.prop('checked');

   //实现控制checkbox是否选中状态:  切换到初始状态
  if (!(dom.prop('checked'))) {
  dom.prop('checked',!(dom.prop('checked')));
  dom.prop('checked',dom.prop('checked'));
  }else{
   dom.prop('checked',dom.prop('checked'));
   dom.prop('checked',!(dom.prop('checked')));
  } 2. 判断checkbox是否被选中   dom.is(':checked') 3. 设置是否选中状态 dom.prop('checked',true); dom.prop('checked',false);
//全选按钮
$(document).on('click', 'th input:checkbox', function () {
var that = this;
$(this).closest('table').find('tr > td:first-child input:checkbox')
.each(function () {
this.checked = that.checked;
//$(this).closest('tr').toggleClass('selected');
});
});
/**
* 获取选中的CheckBox值
* @param Domid 包含checkBox元素的容器id
* @param delimiters 值的分隔符如:'|',','
* @returns {string} 返回字符串
*/
bingjs.get_checkbox_value = function (Domid, delimiters) {
var Id_string = '';//选中的值
$('#' + Domid).find('tr > td:first-child input:checkbox')
.each(function () {
//this与$(this)的区别 一个是dom一个是jquery对象
if (this.checked == true) {
Id_string += $(this).val() + delimiters; }
});
//console.info(Id_string.indexOf(delimiters));
//console.info(Id_string);
if (Id_string.lastIndexOf(delimiters)) {
Id_string = Id_string.substr(0, Id_string.length - 1);
}
return Id_string;
}
 
 

1.通过 attr('checked','checked') 来设置checkbox时,重复点击,虽然checked属性设置正确,但是checkbox没有被勾选 ,如下代码:(代码是全选功能)

$('#ckAll').click(function(){
            if($('#ckAll ').attr('checked') == 'checked'){
                $('#ckAll').removeAttr('checked');
            }else{
                $('#ckAll').attr('checked','checked');
            }
            if($('#ckAll').attr('checked') == 'checked'){
                $('.tab-list .ckbox').each(function(i,n){
                    $(n).attr('checked','checked');
                });
            }else{
                $('.tab-list .ckbox').each(function(i,n){
                    $(n).removeAttr('checked');
                });
            }
        });

2. 换成 prop('checked',true) ,当ckAll被选中时,所有列表checkbox都会被选中

$('#ckAll').click(function(){
            if($('#ckAll').prop('checked')){
                $('.tab-list .ckbox').each(function(i,n){
                    $(n).prop('checked',true);
                });
            }else{
                $('.tab-list .ckbox').each(function(i,n){
                    $(n).prop('checked',false);
                });
            }
        });

 

jquery复选框 选中事件 及其判断是否被选中_常用笔记的更多相关文章

  1. jquery复选框 选中事件 及其判断是否被选中

    jquery复选框 选中事件 及其判断是否被选中 (2014-07-25 14:03:54) 转载▼ 标签: jquery复选框选中事件 分类: extjs jquery   今天做了 显示和不显示密 ...

  2. jquery点击复选框触发事件给input赋值

    体验效果:http://keleyi.com/keleyi/phtml/jqtexiao/31.htm 代码如下: <!DOCTYPE html> <html xmlns=" ...

  3. Jquery复选框

    Jquery复选框 1.checkbox list选择 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E ...

  4. Thymeleaf+layui+jquery复选框回显

    一.Thymeleaf+layui+jquery复选框回显 基于Thymeleaf模板下的layui+jquery复选框回显,主要是jquery.大致意思是:把数组转成JSON传到前台,再在前台转回数 ...

  5. jquery 复选框全选/全不选切换 普通DOM元素点击选中/取消选中切换

    1.要选中的复选框设置统一的name 用prop() prop() 方法设置或返回被选元素的属性和值. $("#selectAll").click(function(){ $(&q ...

  6. springMvc接收ajax数组参数,以及jquery复选框选中、反选、全选、全不选

    一.复选框选中.反选.全选.全不选 html代码: <input type='checkbox' name='menuCheckBox' value='10' >苹果 <input ...

  7. 【转载】jquery实现勾选复选框触发事件给input赋值+回显复选框

    引用:https://blog.csdn.net/rui276933335/article/details/45717461 JSP: <td class="as1"> ...

  8. jquery 复选框

    jquery 选中复选框 $("input[type='checkbox']").prop("checked", true); jquery 判断复选框是否被选 ...

  9. easyui 复选框 onClickRow事件与onSelect事件与onCheck事件

    在项目中一直存在一个问题,一直都没发现问题的根源在哪里.在我们测试这边也是偶尔会出现.但是每次我去测试的时候也没问题.今天终于找到原因了! 在easyui中点击行和点击复选框触发的事件是不一样的! 点 ...

  10. Jquery复选框的全选全不选及选择所有复选框实现全选的复选框

    Jquery代码 $(function () { $(":checkbox.parentfunc").click(function () { //如何获取被点击的那个复选框 $(t ...

随机推荐

  1. OpenCV 学习笔记03 drawContours函数

    opencv-python   4.0.1 轮廓的绘制或填充. cv2.drawContours(image, contours, contourIdx, color[, thickness[, li ...

  2. mysql合并binlog

    例如: PURGE MASTER LOGS BEFORE DATE_SUB( NOW( ), INTERVAL DAY);

  3. 码字工作者的发文姿势—— 用MWeb+Markdown Here+七牛 轻松实现多平台发布

    码字工作者的发文姿势—— 用MWeb+Markdown Here+七牛 轻松实现多平台发布   1.对于写作你最头疼什么 对于大多数码字工作者来说,随时随地记录灵感,构思文章,集中书写,其实是一件令人 ...

  4. django -- model中只有Field类型的数据才能成为数据库中的列

    一.model的定义: from django.db import models # Create your models here. class Person(models.Model): firs ...

  5. 关于Eclipse如何加入Gradle文件与Android Studio两个平台一起开发,工作目录不发生变化

    前言: 本来很久之前想弄这玩意,不过因为各种原因,所以没弄. 今天有位前辈提出需求.说想让Eclipse的Android项目逐步走向Android Studio,但是又担心Android Studio ...

  6. WCF返回null超时

    Message.CreateMessage(msg.Version, msg.Headers.Action + "Response", DealObject("错误信息& ...

  7. Requests: 让 HTTP 服务人类

    requests 2.18.1文档 requests流式post文件 Calling SOAP Web service using requests module of

  8. rpm 安装zabbix 注意

    # grep zabbix /etc/sudoers zabbix ALL=(ALL) NOPASSWD: /sbin/blockdev

  9. 我的IT之路2013(二)

    严寒即将过去,温暖的春天正在向我们招手,欢呼吧,在迎接新的开始的同时,不要忘了回顾一下过去的这一年,总结一下过去的这一年有什么得失. 英语学习 13年下半年,最大的变化就是有很大一部分时间用来学英语. ...

  10. 菜鸟学SSH(五)——Struts2上传文件

    上传文件在一个系统当中是一个很常用的功能,也是一个比较重要的功能.今天我们就一起来学习一下Struts2如何上传文件. 今天讲的上传文件的方式有三种: 1,以字节为单位传输文件: 2,Struts2封 ...