以下为使用JQuery获取input checkbox被选中的值代码: <html> <head> <meta charset="gbk"> <!-- 引入JQuery --> <script src="jquery-1.3.1.js" type="text/javascript"></script> </head> <body> <input type="checkbox" value="橘子" name="check">橘子1</input> <input type="checkbox" value="香蕉" name="check">香蕉1</input> <input type="checkbox" value="西瓜" name="check">西瓜1</input> <input type="checkbox" value="芒果" name="check">芒果1</input> <input type="checkbox" value="葡萄" name="check">葡萄1</input> <input type="button" value="方法1" id="b1"> <input type="button" value="方法2" id="b2"> </body> <script> //方法1 $("#b1").click(function(){ //$('input:checkbox:checked') 等同于 $('input[type=checkbox]:checked') //意思是选择被选中的checkbox $.each($('input:checkbox:checked'),function(){ window.alert("你选了："+ $('input[type=checkbox]:checked').length+"个，其中有："+$(this).val()); }); }); //方法2 $("#b2").click(function(){ $.each($('input:checkbox'),function(){ if(this.checked){ window.alert("你选了："+ $('input[type=checkbox]:checked').length+"个，其中有："+$(this).val()); } }); }); </script> </html>
实现全选反选 注意用：prop
<ul id = "list-unstyled" class="list-unstyled">
<li><input name="check" type="checkbox" value="9-DM"></li>
<li><input name="check" type="checkbox" value="10-DM"></li>
<li><input name="check" type="checkbox" value="11-DM"></li>
<li><input name="check" type="checkbox" value="12-DM"></li>
</ul>
// 全选 $('#allcheck').click(function(){ $('input[name="check"]').prop('checked','true'); }); //反选 $('#reversecheck').click(function(){ $('input[name="check"]').each(function () { $(this).prop("checked", !$(this).prop("checked")); }); });