利用Jquery的prop制作复选框全选和取消功能

作者:Davidszhou   来源:   时间:2016-08-26 11:05:49   点击:

  利用Jquery的prop制作复选框全选和取消功能
jquery增加和删除元素属性有:attr与prop
经百度attr与prop的使用环境:
对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。
对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。
attr与prop的返回值如下:
$("#chk1").prop("checked") == false
$("#chk2").prop("checked") == true
如果上面使用attr方法,则会出现:
$("#chk1").attr("checked") == undefined
$("#chk2").attr("checked") == "checked"
了解之后,我们说一下思路:
1、当点击全选的复选框,子选项全部为选中,取消选中全选复选框,子选项全部取消
2、给全选复选框一个change事件,之后判断全选复选框是否为选中,根据全选复选框的true与false属性判断是否全选与全取消:
代码如下(全部):

<!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="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(e) {
    $("[name='quanxuan']").change(function(){
        if($("[name='quanxuan']").prop("checked")==true){
            $(".xx").prop("checked",true)
            }else{
            $(".xx").prop("checked",false)
                }
        })
});
</script>
<form action="" method="get">
  <p>
  <input name="quanxuan" type="checkbox" value="" />全选<br />
    <label>
      <input type="checkbox" name="xx1[]" value="复选框" class="xx" />
      选项1
      </label>
    <br />
    <label>
      <input type="checkbox" name="xx2[]" value="复选框" class="xx" />
      选项2
      </label>
    <br />
  </p>
</form>
</body>
</html>
效果动图如下:

利用Jquery的prop制作复选框全选和取消功能

TAGS:Jquery , prop

来自Davids zhou博客原创文章请尊重作者:http://www.zongk.com/zongk/75.html转载请标注此链接

网站统计
文章总数:129
今天发布:0
软件资源数:18