Web前端之复选框选中属性

Web前端之复选框选中属性

　　熟悉web前端开发的人都知道，判断复选框是否选中是经常做的事情，判断的方法很多，但是开发过程中常常忽略了这些方法的兼容性，而是实现效果就好了。博主之前用户不少方法，经常Google到一些这个不好那个不好的文章，到后面自己都混乱了。今天偶然看到一篇外国的博客，觉得讲解的很不错，打算翻译成中文，并加上了一些自己的见解。翻译的目的一是分享给大家，二是方便自己查阅。原文链接是：http://conceptf1.blogspot.com/2014/10/checkbox-checked-property.html。、

　　如果你从事web开发并且在你开发的网页中有复选框，你可能需要判断当前该复选框是否选中，进而执行一些条件语句。有很多种方法来判断一个复选框是否选中。

　　让我们先来看看原生的javascript是怎么判断这个属性的。在javascript中，在你选中了某个元素之后，你可以轻易地通过该元素的checked属性来判断你选中的复选框是否选中了。

　　我们来看一个例子，在你的页面上面有一个复选框并且该复选框有着唯一的id，比如myCheckBox ，如下面所示：

1 <input type="checkbox" id="myCheckBox"/>

　　现在我们首先通过javascript来选中这个元素然后获取它的checked属性。

1 function checkCheckBox() {
2     if (document.getElementById('myCheckBox').checked) {
3         //change it to alert('Its Checked'); if you not working with console
4         console.log('Its Checked');
5     } else {
6         console.log('No its not Checked');
7     }
8 }

　　可以看到，我们先通过id选中了这个元素然后判断它的checked属性，如果复选框选中了，它的值是true，如果复选框没有选中，它的值将是false。点击查看该例子。

　　如果你使用的是jQuery并且你不想用原生的javascript来进行这个判断，方法有很多：

　　（1）使用 is(':checked')

　　　　 这个用法中你将使用jQuery的 is()函数。这个函数的功能是判断选中的元素或者元素集合是否满足你传递给该函数的条件参数，如果条件符合，返回true，否则返回false。

　　　　 所以为了使用这个函数，我们需要选中元素然后检测选择器:checked 的值，这个选择器适用于复选框、单选按钮和select标签。 点击查看该例子

1 $('input[type="button"]').click(function () {
2     if ($('#myCheckBox').is(':checked')) {
3         //change it to alert('Its Checked'); if you not working with console
4         console.log('Its Checked');
5     } else {
6         console.log('No its not Checked');
7     }
8 });

　　（2）使用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属性集的输入框：

1 <input type="text" id="myTextBox" value='set attribute value' /> 

　　　　然后在JQuery代码里我们这样写：

1 console.log('Attribute Value is : '+$('#myTextBox').attr('value'));
2 console.log('Property Value is : '+$('#myTextBox').prop('value'));

　　　　我们会发现，通过prop()来获取输入框里面的值永远都是和它里面的值同步的，而通过attr()老获取输入框里面的值一直都是在html标签里面设置的值。 点击查看该例子

　　（3）使用 filter :checked

1 var isChecked = $('#myCheckBox:checked').length > 0;

　　　　另外一种用于判断这个属性的值的方法是在选择元素的时候加上一个过滤器  :checked，然后根据所获得的元素的长度来判断元素的属性。但是这种用法并不推荐，因为当你的页面上有很多组复选框并且使用class选择器而不是id选择器的时候，所得到的答案可能是错误的。 点击查看该例子

　　我们能够看到，我们有好几种方法来获得复选款的选中属性。这也恰恰是web开发者经常需要用到并且在选择正确的使用方式时产生困惑的地方。