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选择器的区别

猜你喜欢