jquery checkbox使用

最新推荐文章于 2025-11-11 22:31:28 发布

原创最新推荐文章于 2025-11-11 22:31:28 发布 · 399 阅读

0 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

2 篇文章

订阅专栏

博客介绍了jQuery中检查元素选中状态的三种方法，包括.attr('checked')、.prop('checked')和.is(':checked')，指出1.6+版本中.attr返回'checked'或'undefined'，.prop返回true/false，.is在所有版本都返回true/false，推荐使用.is(':checked')，还提及了修改选中状态如全选或全不选。

jquery checkbox使用

1.jquery判断checked的三种方法:

.attr(‘checked’): //看版本1.6+返回:”checked”或”undefined”
.prop(‘checked’): //16+:true/false
.is(’:checked’): //所有版本:true/false

推荐用.is(’:checked’):这种方法。

$("#selectAll").click(function () {
  // 法一：
  if($(this).is(':checked')){
        alert("选中");
    }else{
        alert("没选中");
    }
    // 法2：
    // if(select1.prop('checked')){
    //     alert("选中");
    // }else{
    //     alert("没选中");
    // }
});

修改选中

// 以两个按钮控制其值为例子
// 法一
$(window).load(function () {
	$("#batchEditBtn").click(function () {
       document.getElementById("selectAll").checked = true;
    });

    $("#batchEditBtn1").click(function () {
        document.getElementById("selectAll").checked = false;
    });
});

// 法二：js函数方式
function clickBatchEdit(){
     document.getElementById("selectAll").checked = true;
 }

 function clickBatchEdit1(){
     document.getElementById("selectAll").checked = false;
 }
 
// 法三：纯jquery
$("#batchEditBtn").click(function () {
    $("#selectAll").prop("checked", true);
});

$("#batchEditBtn1").click(function () {
    $("#selectAll").prop("checked", false);
});

全选或全不选

$("#selectAll").click(function () {
    // 法一
    $("input[name='tableCheckItem']").prop("checked", this.checked);
    
    // 法二：使用遍历的方法
	//   $("input[name='tableCheckItem']").each(function(){
	//     });
});