论坛首页 Web前端技术论坛

jquery实现复选框的全选及单选框的取值

浏览 7427 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2010-06-01  

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

论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics