javascript实现复选框选中属性
熟悉web前端开发的⼈都知道，判断复选框是否选中是经常做的事情，判断的⽅法很多，但是开发过程中常常忽略了这些⽅法的兼容性，⽽是实现效果就好了。博主之前⽤户不少⽅法，经常Google到⼀些这个不好那个不好的⽂章，到后⾯⾃⼰都混乱了。今天偶然看到⼀篇外国的博客，觉得讲解的很不错，打算翻译成中⽂，并加上了⼀些⾃⼰的见解。
如果你从事web开发并且在你开发的⽹页中有复选框，你可能需要判断当前该复选框是否选中，进⽽执⾏⼀些条件语句。有很多种⽅法来判断⼀个复选框是否选中。
让我们先来看看原⽣的javascript是怎么判断这个属性的。在javascript中，在你选中了某个元素之后，你可以轻易地通过该元素的checked属性来判断你选中的复选框是否选中了。
我们来看⼀个例⼦，在你的页⾯上⾯有⼀个复选框并且该复选框有着唯⼀的id，⽐如myCheckBox ，如下⾯所⽰：
复制代码代码如下:
<input type="checkbox" id="myCheckBox"/>
现在我们⾸先通过javascript来选中这个元素然后获取它的checked属性。
复制代码代码如下:
function checkCheckBox() {
if (ElementById('myCheckBox').checked) {
//change it to alert('Its Checked'); if you not working with console
console.log('Its Checked');
} else {
console.log('No its not Checked');
}
}
可以看到，我们先通过id选中了这个元素然后判断它的checked属性，如果复选框选中了，它的值是true，如果复选框没有选中，它的值将是false。
如果你使⽤的是jQuery并且你不想⽤原⽣的javascript来进⾏这个判断，⽅法有很多：
使⽤ is(':checked')
这个⽤法中你将使⽤jQuery的 is()函数。这个函数的功能是判断选中的元素或者元素集合是否满⾜你传递给该函数的条件参数，如果条件符合，返回true，否则返回false。
所以为了使⽤这个函数，我们需要选中元素然后检测选择器:checked 的值，这个选择器适⽤于复选框、单选按钮和select标签。
[/code]
$('input[type="button"]').click(function () {
if ($('#myCheckBox').is(':checked')) {
jquery的attr属性//change it to alert('Its Checked'); if you not working with console
console.log('Its Checked');
} else {
console.log('No its not Checked');
}
});
[/code]
使⽤ prop()
在jQuery1.6之前，函数attr()⽤来获取元素的property 和attributes，但是⾮常容易让⼈产⽣疑惑。所以jQuery1.6之后，⼀个新的函数prop()来获取元素的当前的property值。
但是在这之前，我们⾸先需要弄明⽩property 和attributes的区别。attributes是你给HTML标签设置的⼀些属性值，这包括你给⼀个标签设置的class、id甚⾄给输⼊框设定初始值⼀样。如果你没有在标签⾥⾯设置属性值但是却通过attr()来获取属性值，  会出现undefined的情况。prop()同样是⽤来获取元素的属性值，但是与attr()有着明显的区别的是，即便没有在html标签中定义想要获取的属性，也能够正确的返回需要的当前的属性值。
根据官⽅的建议：具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使⽤prop()，其他的使⽤ attr()。
为了直观的体现两者之间的差别，你可以再页⾯加载完成之后⽴即改变输⼊框的值，这时候你就会发现即便是你的输⼊框的值变化了，⽤attr()获取的属性值并不会随着⽂本的改变⽽改变，⽽通过property()来获取的属性值会随着⽂本框内容的变化⽽变化。
看⼀个例⼦，这⾥我们有⼀个设置了初始值的和⼀些attribute属性集的输⼊框：
复制代码代码如下:
<input type="text" id="myTextBox" value='set attribute value' />
然后在JQuery代码⾥我们这样写：
复制代码代码如下:
console.log('Attribute Value is : '+$('#myTextBox').attr('value'));
console.log('Property Value is : '+$('#myTextBox').prop('value'));
我们会发现，通过prop()来获取输⼊框⾥⾯的值永远都是和它⾥⾯的值同步的，⽽通过attr()⽼获取输⼊框⾥⾯的值⼀直都是在html标签⾥⾯设置的值。
复制代码代码如下:
$('input[type="button"]').click(function () {
alert('Attribute Value is : '+$('#myTextBox').attr('value'));
alert('Property Value is : '+$('#myTextBox').prop('value'));
});
使⽤ filter :checked
var isChecked = $('#myCheckBox:checked').length > 0;
另外⼀种⽤于判断这个属性的值的⽅法是在选择元素的时候加上⼀个过滤器 :checked，然后根据所获得的元素的长度来判断元素的属性。但是这种⽤法并不推荐，因为当你的页⾯上有很多组复选框并且使⽤class选择器⽽不是id选择器的时候，所得到的答案可能是错误的。
复制代码代码如下:
$('input[type="button"]').click(function () {
if ($('#myCheckBox:checked').length > 0 ) {
//change it to alert('Its Checked'); if you not working with console
console.log('Its Checked');
} else {
console.log('No its not Checked');
}
});
我们能够看到，我们有好⼏种⽅法来获得复选款的选中属性。这也恰恰是web开发者经常需要⽤到并且在选择正确的使⽤⽅式时产⽣困惑的地⽅。
以上所述就是本⽂的全部内容了，希望对⼤家学习javascript能够有所帮助。
请您花⼀点时间将⽂章分享给您的朋友或者留下评论。我们将会由衷感谢您的⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。