javascript实现复选框选中属性

熟悉web前端开发的人都知道，判断复选框是否选中是经常做的事情，判断的方法很多，但是开发过程中常常忽略了这些方法的兼容性，而是实现效果就好了。博主之前用户不少方法，经常Google到一些这个不好那个不好的文章，到后面自己都混乱了。今天偶然看到一篇外国的博客，觉得讲解的很不错，打算翻译成中文，并加上了一些自己的见解。

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

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

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

代码如下:
<input type="checkbox" id="myCheckBox"/>

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

代码如下:
    function checkCheckBox() {
        if (document.getElementById('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')) {
            //change it to alert('Its Checked'); if you not working with console
            console.log('Its Checked');
        } else {