首页 > web前端 > js教程 > jQuery操作checkbox实现多项选中与取消选中的实例

jQuery操作checkbox实现多项选中与取消选中的实例

黄舟
发布: 2018-05-15 13:49:55
原创
3671 人浏览过

我们在之前的一篇文章中我们给大家介绍了关于jQuery操作checkbox的方法详解,既然我们已经了解过checkbox的方法,那我们如何使用checkbox实现多项选中呢?今天我们就带大家介绍下jQuery操作checkbox实现多项选中与取消选中的实例!

首先我们先看下效果图:

<html>
<head>
    <title></title>
    <script src="jquery-1.8.3.min.js"></script>
    <script>
        function check() {
            var code = "";
            //$("input[name=chkname][value=AAAAA],[value=BBBBB]").attr("checked", true);//固有属性
            $("input[name=chkname][value=AAAAA],[value=BBBBB]").prop("checked", true);//自定义的DOM属性
        }
        function clearcheck() {
            $("input[name=chkname]").removeAttr("checked");
        }
    </script>
</head>
<body>
    <input type="checkbox" value="AAAAA" name="chkname" />AAAAA
    <input type="checkbox" value="BBBBB" name="chkname" />BBBBB
    <input type="checkbox" value="CCCCC" name="chkname" />CCCCC
    <input type="checkbox" value="DDDDD" name="chkname" />DDDDD
    <br />
    <input id="btnCheck" type="button" value="选中[value=AAAAA],[value=BBBBB]" onclick="check()" />
    <input id="btnClear" type="button" value="取消选中" onclick="clearcheck()" />
    <br />
  
<pre class="brush:php;toolbar:false">
对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。
对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。
如果在ajax加载方式,attr无效时就使用prop。

<html>
<head>
<title></title>
<script src="jquery-1.8.3.min.js"></script>
<script>
function check() {
var code = "";
$("input[name=chkname][value=AAAAA],[value=BBBBB]").attr("checked", true);
}
function clearcheck() {
$("input[name=chkname]").removeAttr("checked");
}
</script>
</head>
<body>
<input type="checkbox" value="AAAAA" name="chkname" />AAAAA
<input type="checkbox" value="BBBBB" name="chkname" />BBBBB
<input type="checkbox" value="CCCCC" name="chkname" />CCCCC
<input type="checkbox" value="DDDDD" name="chkname" />DDDDD
<br />
<input id="btnCheck" type="button" value="选中[value=AAAAA],[value=BBBBB]" onclick="check()" />
<input id="btnClear" type="button" value="取消选中" onclick="clearcheck()" />
</body>
</html>
登录后复制

总结:

本文使用图文代码的效果为大家展示了jQuery操作checkbox实现多项选中与取消选中的实例,对此小伙伴们对checkbox实现多项选中有了进一步的了解,希望对你的工作有所帮助!

相关推荐:

jQuery操作CheckBox的方法实例详解

jquery一键控制checkbox全选,反选,全不选的方法

在js中如何获得checkbox里选中的多个值

checkbox实现click事件触发span元素内容改变

以上是jQuery操作checkbox实现多项选中与取消选中的实例的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板