下面我们先给出全选代码:
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")); //取值
});