jQuery技术

checkbox 选中事件 checkbox激发选中和不选中的事件教程详解

字号+ 作者:H5之家 来源:H5之家 2015-11-12 08:32 我要评论( )

本教程是针对 checkbox 选中事件 所分享的教程,主要讲解的是checkbox选中和不选中的事件如何被激发?如何使用的教程。下面由我爱IT技术网Coding追风高级程序员

  本教程是针对checkbox 选中事件所分享的教程,主要讲解的是checkbox选中和不选中的事件如何被激发?如何使用的教程。下面由我爱IT技术网Coding追风高级程序员和大家一起分享。

  一、jquery 关于监听checkbox的选中和不选中事件

  对于jQuery监听checkbox的问题,首先要引入jquery.js这个js文件,详细的引入方式如下:

 

 代码:

<script src=“js/jquery-1.9.1-min.js”></script>

这里使用了jquery

 

 小提示:jquery和jquery min的区别:

两个其实都是一样的,要说有区别就是jquery.js是未压缩版。文件稍大。 jquery.min.js是经过压缩的版,文件较小。为了区分,所以用了jquery.min.js他们的功能其实都是一样的。

 

示例代码:

<body>    <div id=“noteMe”>           <p>id=notMe</p>       </div>        <div id=“myDiv”>       id=myDiv        </div>      <input type=“checkbox” name=“checkbox”   id=“check1”> <script src=“js/jquery-1.9.1-min.js”></script> <script type=“text/”>   $(document).ready(function(){    $(“#check1”).click(function(){                          if($(“#check1”).is(“:checked”)){                           $(“#myDiv”).html(“aaaaa”);//如果选中,这里即为checkbox 选中事件                     }else{                        $(“#myDiv”).html(“id=myDiv”);//如果取消                        }                 });      }); </script> </body> </html>

对于刚接触jQuery的人,第一反应必然是

<input id="checkbox1" type="checkbox" checked><input id="checkbox2" type="checkbox>$("#checkbox1").attr("checked") $("#checkbox2").attr("checked")

回到正题,我们希望的结果肯定是,如果选中了就返回true,没选中就返回false。

如果对jQuery比较熟悉,一般会这么处理

<input id="checkbox1" type="checkbox" checked><input id="checkbox2" type="checkbox>$("#checkbox1").is(":checked") $("#checkbox2").is(":checked")

会造成上面问题的疑问,主要原因是一个html元素,有两种类型属性(不知道这样说是否准确,但是个人认为比较好理解)

 

第一种是DOM节点属性,读取它的方法就是 attr() 方法,拿个input来说

<input id="checkbox1" type="checkbox" checked data-custom='customattribute'>

这个input有的4个dom节点属性 id、type、checked、data-custom。

所以通过attr方法可以拿到这4个属性的值(值和html中写的一样,其中checked的值就是checked,原因上面已解释)

如果你写不存在的属性,返回的就会是undefined。

 

第二种是HTML元素属性,这种属性你看不到,但是确实存在,而且大部分情况和DOM节点属性对应的值一样。

在jQuery中取得这种值的方法是prop();

看下这个例子就明了了

<input id="checkbox1" type="checkbox" checked data-custom='customattribute'>$("#checkbox1").prop("id")  //checkbox1$("#checkbox1").prop("type")  //checkbox$("#checkbox1").prop("checked")  //true$("#checkbox1").prop("data-custom")  // undefined 自定义的DOM节点属性用取HTML元素属性的方法是取不到的

id和type和attr方法返回的一样。但是checked方法返回的值就不一样了,因为DOM节点属性可以理解为静态的,当页面渲染完,checked属性就确定了,就是checked。而HTML元素属性是动态的,随时可以改变,而且对于checked这个属性,对应的值是true或者false。

 

同理,a标签的href属性,用prop和attr取出来的也有可能不一样。attr取出的和看到的一样,prop取出的会是完整路径

<a id="a" href="test.html" class="csstest" style="font-size: 30px;">link</a>$("#a").attr("href") // test.html$("#a").prop("href") // "file:///E:/jquery/test.html"

所以,回到最开始的问题。

自然而然有另外一种解决方法

<input id="checkbox1" type="checkbox" checked><input id="checkbox2" type="checkbox>$("#checkbox1").prop("checked") // true$("#checkbox2").prop("checked") // false

 

现在,这个问题应该已经很明了了。不过attr和prop不仅支持读取属性的操作,还支持写入属性的操作,我简单测试了下,发现在写入方面,attr和prop似乎差别不大。应该是jQuery做了兼容吧。

 

补充:从原生Javascript看根本区别

简而言之把。attr相当于 Element.getAttribute / Element.setAttribute 而 prop相当于 Element[‘name’] / Element.name 这样。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • jquery操作复选框(checkbox)的技巧分享

    jquery操作复选框(checkbox)的技巧分享

    2016-01-16 19:12

  • jquery操作复选框(checkbox)的12个小技巧总结

    jquery操作复选框(checkbox)的12个小技巧总结

    2016-01-16 19:11

  • jquery事件操作

    jquery事件操作

    2016-01-15 11:21

  • jQuery鼠标滚轮事件插件Mouse Wheel

    jQuery鼠标滚轮事件插件Mouse Wheel

    2016-01-14 18:20

网友点评