jquery的[checked]选择器和:checked选择器的区别

jquery的[checked]选择器和:checked选择器的区别:
标题中的两个选择器都可以筛选被选中的表单元素,比如单选按钮或者复选框,下面先看一段代码实例。
代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  $("#bt").click(function(){
    var theVal=$("input[name='sex'][checked]").val();
        $("#txt").val(theVal);
  })
})
</script> 
</head> 
<body> 
<input type="radio" value="男" name="sex" checked />男
<input type="radio" value="女" name="sex" />女
<input type="text" value="显示获取的值" id="txt" />
<input type="button" id="bt" value="点击获取值" />
</body> 
</html> 

 在以上代码代码是具有兼容性问题的,这里事先说明一下。如果按照标准来讲点击按钮,文本框的值只能够是"男",关于兼容性问题这里就不介绍了具体可以参阅 js的Attribue属性兼容性问题简单介绍一章节。

[checked]是用来筛选Attribute属性的,在以上代码中,在默认状态下点击按钮之后,文本框的内容被设置为"男",当再选中第二个单选框的时候,再点点击按钮的时候,文本框的值不会变成女,依然是男(有浏览器兼容性),这个时候使用[checked]只能够筛选Attribute属性,所以匹配的依然是第一个单选按钮,下面将代码做一下修改:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  $("#bt").click(function(){
    var theVal=$("input[name='sex']:checked").val();
        $("#txt").val(theVal);
  })
})
</script> 
</head> 
<body> 
<input type="radio" value="男" name="sex" checked />男
<input type="radio" value="女" name="sex" />女
<input type="text" value="显示获取的值" id="txt" />
<input type="button" id="bt" value="点击获取值" />
</body> 
</html> 

 以上代码实现了我们的要求,无论如何选择,都能够在文本框中得到正确的结果,这是因为:checked选择器是筛选的Property属性的,并且能够兼容所有浏览器,在生成DOM对象之后,这个对象既有Property属性和继承自html的Attribute属性,并且它会映射到Property属性。

相关阅读:
1.Attribute和Property属性可以参阅Property和Attribute两种属性简单介绍一章节。 
2.关于浏览器兼容可以参阅js的Attribue属性兼容性问题简单介绍一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=11337

更多内容可以参阅:http://www.softwhy.com/jquery/

你可能感兴趣的:(jquery的[checked]选择器和:checked选择器的区别)