WebEnh

.net7 mvc jquery bootstrap json 学习中 第一次学PHP,正在研究中。自学进行时... ... 我的博客 https://enhweb.github.io/ 不错的皮肤:darkgreentrip,iMetro_HD
随笔 - 1079, 文章 - 1, 评论 - 75, 阅读 - 174万
  首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8

jQuery对checkbox的各种操作

Posted on   WebEnh  阅读(40701)  评论(0编辑  收藏  举报

jQuery对checkbox的各种操作

 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
//注意: 操作checkbox的checked,disabled属性时jquery1.6以前版本用attr,1.6以上(包含)建议用prop
 
    //1、根据id获取checkbox
    $("#cbCheckbox1");
 
    //2、获取所有的checkbox
    $("input[type='checkbox']");//or
    $("input[name='cb']");
 
    //3、获取所有选中的checkbox
    $("input:checkbox:checked");//or
    $("input:[type='checkbox']:checked");//or
    $("input[type='checkbox']:checked");//or
    $("input:[name='ck']:checked");
 
    //4、获取checkbox值
    //用.val()即可,比如:
    $("#cbCheckbox1").val();
 
 
    //5、获取多个选中的checkbox值
    var vals = [];
    $('input:checkbox:checked').each(function (index, item) {
        vals.push($(this).val());
    });
     
    //6、判断checkbox是否选中(jquery 1.6以前版本 用  $(this).attr("checked"))
    $("#cbCheckbox1").click(function () {
        if ($(this).prop("checked")) {
            alert("选中");
        } else {
            alert("没有选中");
        }
    });
 
    //7、设置checkbox为选中状态
    $('input:checkbox').attr("checked", 'checked');//or
    $('input:checkbox').attr("checked", true);
 
    //8、设置checkbox为不选中状态
    $('input:checkbox').attr("checked", '');//or
    $('input:checkbox').attr("checked", false);
 
    //9、设置checkbox为禁用状态(jquery<1.6用attr,jquery>=1.6建议用prop)
    $("input[type='checkbox']").attr("disabled", "disabled");//or
    $("input[type='checkbox']").attr("disabled", true);//or
    $("input[type='checkbox']").prop("disabled", true);//or
    $("input[type='checkbox']").prop("disabled", "disabled");
 
    //10、设置checkbox为启用状态(jquery<1.6用attr,jquery>=1.6建议用prop)
    $("input[type='checkbox']").removeAttr("disabled");//or
    $("input[type='checkbox']").attr("disabled", false);//or
    $("input[type='checkbox']").prop("disabled", "");//or
    $("input[type='checkbox']").prop("disabled", false);

  

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <h3>jQuery操作checkbox
    </h3>
    <input type="checkbox" id="cbCheckbox1" value="1" />
    <input type="checkbox" value="2" />
    <input type="checkbox" disabled="disabled" value="3" />
    <input type="checkbox" value="4" />
    <input type="checkbox" disabled="true" value="5" />
    <br />
    <input type="button" id="btnDisabled" value="禁用" onclick="fn_disabled();" />
    <input type="button" id="Button1" value="启用" onclick="fn_enable();" /><br />
    <input type="button" id="Button2" value="获取选中的值" onclick="getCheckedValues();" /><br />
    <input type="button" id="Button3" value="选中第二个" onclick="checkedSecond();" />
    <input type="button" id="Button4" value="取消选中第二个" onclick="uncheckedSecond();" /><br />
</body>
</html>
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
 
    function fn_disabled() {
        //$("input[type='checkbox']").attr("disabled", "disabled");
        //$("input[type='checkbox']").attr("disabled", true);
        $("input[type='checkbox']").prop("disabled", true);
        //  $("input[type='checkbox']").prop("disabled", "disabled");
    }
 
    function fn_enable() {
        //  $("input[type='checkbox']").removeAttr("disabled");
        // $("input[type='checkbox']").attr("disabled", false);
        // $("input[type='checkbox']").prop("disabled","");
        $("input[type='checkbox']").prop("disabled", false);
    }
 
    //获取选中的 checkbox的值
    function getCheckedValues() {
        var arr = [];
        $("input[type='checkbox']:checked").each(function (index, item) {//
            arr.push($(this).val());
        });
        alert(arr);
    }
 
    function checkedSecond() {
        // $("input[type='checkbox']:eq(1)").prop("checked", "checked");
        $("input[type='checkbox']:eq(1)").prop("checked", true);
    }
 
    function uncheckedSecond() {
        //  $("input[type='checkbox']:eq(1)").prop("checked", "");
        $("input[type='checkbox']:eq(1)").prop("checked", false);
    }
 
    $("#cbCheckbox1").click(function () {
        if ($(this).prop("checked")) {//jquery 1.6以前版本 用  $(this).attr("checked")
            alert("选中");
        } else {
            alert("没有选中");
        }
    });
 
</script>

  

编辑推荐:
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
历史上的今天:
2018-06-15 在.NET开发中的单元测试工具之(1)——NUnit
2018-06-15 在.NET开发中的单元测试工具之(2)——xUnit.Net
2018-06-15 Git 头像修改 原
2018-06-15 Dapper.NET——轻量ORM
2017-06-15 Windows平台分布式架构实践 - 负载均衡
2017-06-15 WINDOWS 2008Server 配置nginx 反向代理服务器 安装成服务
点击右上角即可分享
微信分享提示

喜欢请打赏

扫描二维码打赏

了解更多