jQuery 判断checkbox是否选中的方法

测试脚本
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<input type="checkbox" value="y" name="my-test-checkbox" id="my-test-checkbox" checked>
<script>
  var $el = $('#my-test-checkbox');
</script>

1、.prop()
$el.prop('checked');

2、.is(':checked')
$el.is(':checked');
    
3、attr("checked")
$el.attr("checked");

4、.checked
$el[0].checked;

上面四种方法都可以判断当前checkbox是否被选中,其中最快的方法是4,最慢的方法是3。
设置checkbox选中的方法官方推荐的方法是.prop(),.checked方法实际上是原生态JavaScript获取属性的方法,所以更快速。

本文参考
http://jsperf.com/prop-vs-ischecked/5

jQuery checkbox 全选和反选最简洁快速的方法

这段代码实现的是在同一个fieldset下的checkbox的全选和反选功能,一行代码搞定,方法既简洁又高效。
html
添加checkbox表单保证他们在同一个fieldset里面。

<fieldset>
        <div><input type="checkbox" class="checkall">选择全部</div>
        <div><input type="checkbox"> Checkbox</div>
        <div><input type="checkbox"> Checkbox</div>
        <div><input type="checkbox"> Checkbox</div>
</fieldset>
<fieldset>
        <div><input type="checkbox" class="checkall">选择全部</div>
        <div><input type="checkbox"> Checkbox</div>
        <div><input type="checkbox"> Checkbox</div>
        <div><input type="checkbox"> Checkbox</div>
</fieldset>

jQuery 代码
原理是根据当前点击选择全部这个checkbox表单的状态,给最近的fieldset里面的checkbox设置checked状态。文字太绕口,直接看代码。

$(function () {
    $('.checkall').on('click', function () {
        $(this).closest('fieldset').find(':checkbox').prop('checked', this.checked);
    });
});

 

jQuery checkbox 取值

html元素

<div id="main">
 <input type="checkbox" name="newsletter[]" value="Hot Fuzz" />Hot Fuzz
 <br />
 <input type="checkbox" name="newsletter[]" value="Cold Fusion" />Cold Fusion
 <br />
 <input type="checkbox" name="newsletter[]" value="Evil Plans" />Evil Plans
 <br />
 <input type="checkbox" name="email[]" value="Hot Fuzz" />Hot Fuzz
 <br />
 <input type="checkbox" name="email[]" value="Cold Fusion" />Cold Fusion
 <br />
 <input type="checkbox" name="email[]" value="Evil Plans" />Evil Plans
 <br />
 <p> <a href="#" id="getvalue">取值</a></p>
 </div>

js代码

<script type="text/javascript">
$(document).ready(function() {
 
 //取值
 $("#getvalue").bind('click',function(){
  var arr = $("input:checkbox[name='newsletter[]']:checked").vals();
  alert(arr);
 });

});

$.fn.vals = function(){
 return this.map(function(){ return $(this).val(); }).get();
}

</script>