JQuery操作单选按钮以及复选按钮

1. 复选框操作：

<form> 您爱好的运动是： <input type="checkbox" name="item" value="football"/> football <input type="checkbox" name="item" value="basketball"/> basketball <input type="checkbox" name="item" value="badminton"/> badminton <input type="checkbox" name="item" value="pingpong"/> pingpong <input type="button" id="checkAll" value="全选"/> <input type="button" id="checkFootball" value="选中足球"/> </form>

绑定事件

$(document).ready(function() { $('#checkAll').click(checkAll); // 全选 $('#checkFootball').click(checkFootball); // 单选足球 });

选中所有的。 这里分别提供了两种方式进行选中。具体参见API中的属性和表单选择器

function checkAll() { $('input[type="checkbox"][name="item"]').attr("checked", true); // $('[name="item"]:checkbox').attr("checked", true); }

注： 全反选只需要将这里的 true 换成 false 即可。

选中足球

function checkFootball() { $("[name='item']:checkbox").each(function() { if (this.value == 'football') { this.checked = true; } }) }

注： 具体目的为了解决从后台取出数据，显示。这里并没有用jQuery的attr()和val()方法来设置选中和获得当前checkbox的值，改用了JavaScript原生的 Dom 方法，将比创建jQuery对象更有效。

2. 单选按钮操作：

A B C D 您选择哪一个：<br/> <input type="radio" name="item" value="A"/>A <input type="radio" name="item" value="B"/>B <input type="radio" name="item" value="C"/>C <input type="radio" name="item" value="D"/>D <input type="button" id="getLetter" value="获得字母"/>

初始化选中字母B

$(document).ready(function() { 
// 数据初始化选择B。
$('[name="item"]:radio').each(function() { if (this.value == 'B') { this.checked = true;
} });
// 绑定获得字母的事件 $('#getLetter').click(getLetter);
}
);

获得所选中的字母

function getLetter() { alert('获得的字母为：' + $('[name="item"][checked=true]:radio').val()); }

传统的JS获取选中的值如下：

[javascript] function getids(){ 
                var obj = document.getElementsByTagName("input"); 
                var menuIds=""; 
                for ( var i = 0; i < obj.length; i++) { 
                    if (obj[i].type == "checkbox" && obj[i].checked == true) { 
                        menuIds+= obj[i].value + ","; 
                    } 
                } 
                if(menuIds.indexOf(",")!=-1){ 
                    menuIds=menuIds.substring(0, menuIds.length-1);//去掉结尾的,  
                } 
                return menuIds; 
            } 
function getids(){
    var obj = document.getElementsByTagName("input");
    var menuIds="";
    for ( var i = 0; i < obj.length; i++) {
     if (obj[i].type == "checkbox" && obj[i].checked == true) {
      menuIds+= obj[i].value + ",";
     }
    }
    if(menuIds.indexOf(",")!=-1){
     menuIds=menuIds.substring(0, menuIds.length-1);//去掉结尾的,
    }
    return menuIds;
   }

单选按钮以及复选按钮在开发过程中会经常用到，下面我就来通过JQuery操作单选按钮和复选按钮：

单选按钮：

通过JQuery获取单选按钮对象我们总共有三种途径：

①ID：$("#radioId")

②NAME：$(":input[name='radioName']")

③TYPE：$("input[type=radio]")，可能在有的资料上面写的是：$(""input[@type=radio]"")，这个的话跟你的JQuery版本有关系，如果是老版本的话就用后者，新版本就用前者，如果不知道自己的版本到底适合用哪一个的话就挨个试，反正一次尝试就能搞定，而且还能学到知识，何乐而不为呢！

我们都知道，在一组单选按钮当中只能使一个生效，要实现这种效果，很多人可能会认为把ID改为相同的就可，其实，你去尝试一下就会知道，在一组单选按钮中仍然可以选用多个。因为，实现此效果的关键属性不是ID，而是NAME。

介绍完了之后，我们投入到只用当中吧：

我们获取完单选按钮的对象之后，就得对此对象进行遍历，因为，此对象的类型是一个数组，我们要挨个对其进行判断是否被选中，然后再从选中的按钮中取出所需要的值，示例代码如下：

[javascript]  var itemradio = $("input[type=radio]"); 
        result=""; 
        nums = itemradio.length; 
        for(i=0;i<nums;i++)    { 
               if(itemradio[i].checked){   
                   result = itemradio[i].value+","+itemradio[i].id+";"+result; 
               } 
        } 
result就是我想获取的值，前面那个value可能大家会看得懂，而后面那个ID有的人可能会犯迷糊。在此，我就进行一下扩展：在JS中所有的对象都可以直接通过“.”来获取属性的值。

复选框：

关于复选框，我们需要的只是“全选和反选”的效果，使用JQuery的话只要一句话就可以搞定，如下：

[javascript]  var checkedObj = $('input:checkbox[name="checkbox"]:checked'); 
        var values = ""; 
        checkedObj.each(function() {  
            var value=this.value + ",";  
            values += value; 
        }); 
好啦，通过上面的两段代码你就可以操作复选框和单选按钮啦！！！