jquery实现复选框的全选及单选框的取值
下面我们先给出全选代码：
html中的代码：
<input type="checkbox" name="checkbox_name[]" id="checkbox_name_1" />
??? ??? 1
??? ??? <br />
??? ??? <input type="checkbox" name="checkbox_name[]" id="checkbox_name_2" />
??? ??? 2
??? ??? <br />
??? ??? <input type="checkbox" name="checkedAll" id="checkedAll" />
??? ??? 全选/取消全选
js中的代码：
?$(document).ready(function() {?
//定义全选框的名称为$chkall
?? var $chkall = $('#checkedAll');
?? var $chkarry = $('input[type="checkbox"]').not($('#checkedAll'));//取到除全选框的其它复选框
?? //全选框的实现函数
?? $chkall.click(function(){
??? var b = $(this).attr('checked');//取到全选框的值
??? $chkarry.each(function(){ $(this).attr('checked', b); });//设置其它复选框值与全选框同步，实现全选，取消全选功能
?? });
?? //除了全选的其它复选框
?? $chkarry.each(function(){
??? $(this).click(function(){
???? //先把每个其它复选框的值赋给全选框
???? $chkall.attr('checked', $(this).attr('checked'));
???? //再循环所有其它的复选框是否已经全部选择，实现全选与其它复选框出现全选情况下同步。
??? //即如果其它复选都已经选择，则全选也选择。
???? $chkarry.each(function(index){ $chkall.attr('checked', ($chkall.attr('checked') && $chkarry.eq(index).attr('checked'))? true:false); });
??? });
?? });?
});
相对复选框来说，如何取到单选框的值就简单得多啦。
下面是单选框取值实现代码：
html的代码：
<div id="test1">
??? ??? ??? <input id="radio1" type="radio" name="radio1" value="人">
??? ??? ??? 人
??? ??? ??? <input id="radio2" type="radio" name="radio1" value="鬼">
??? ??? ??? 鬼
?</div>
?相对上面的情况有两种实现的方法：
//1、利用div的id实现
//#test1 input 代表是test1元素下的所有input元素
?$("#test1 input").click(function(){
alert($(this).attr("value"));});
//2、取得所有的单选类型的input元素，因为单选可能选择一个，所以this就是当前选择的单选框
?var radio = $('input[type="radio"]');
?radio.click(function()
?{
???? alert($(this).attr("value"));?? //取值
?});
