jQuery之全选功能

最新推荐文章于 2024-07-22 15:13:59 发布

aipmunj7655

最新推荐文章于 2024-07-22 15:13:59 发布

阅读量47

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/Itwonderful/p/5491997.html

版权

例子：点击全选，将所有checkbox选中。

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery.min.js">
</script>
</head>

<body>
<input type="checkbox" id="aa"  />全选<br />
<input type="checkbox" class="bb"  />方式一
<input type="checkbox" class="bb"  />方式二
<input type="checkbox" class="bb"  />方式三
<input type="checkbox" class="bb" />方式四


</body>
</html>

方法一：

<script>
$(document).ready(function(e) {
   
 $("#aa").click(function ()   //全选功能方法一：通过点击事件，用循环使所有需要被选中的选项被选中
 {
     var xx = $(".bb");        //找出所有要被选中的选项，放入一个变量中
     var qx = $(this)[0].checked;//找到全选自身的选中状态，因为用到DOM对象中的checked功能，所以要取索引为0的对象
     for(var i = 0;i<xx.length;i++)
     {
         xx[i].checked = qx;
     }
     })
});
</script>

方法二：

<script>
$(document).ready(function(e) {
    
    $("#aa").click(function ()  //全选功能方法二：通过点击事件，调用prop操作checked属性
    {
        var xx = $(".bb");
        var qx = $(this)[0].checked;
        xx.prop("checked",qx);  //注意：此方法中第一个参数为属性名，第二个参数为true或false;
        
    })
}); //此方法一般只用于checked属性操作，因为在jQurey中checked存在BUG，否则的话用添加移除属性方法则更为简便
</script>

方法三：

<script>
$(document).ready(function(e) {
    $("#aa").click(function ()
    {
        var xx = $(".bb");
        var qx = $(this)[0].checked;
        if(qx)
        {
            xx.attr("checked","checked");
        }
        else
        {
            xx.removeAttr("checked");
        }
    })
});//如上所说，此方法没有问题，但就是无法显示，所以存在BUG
</script>

转载于:https://www.cnblogs.com/Itwonderful/p/5491997.html

aipmunj7655

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery之全选功能

例子：点击全选，将所有checkbox选中。<!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/x...
复制链接

扫一扫