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; 
        }); 
好啦，通過上面的兩段代碼你就可以操作複選框和選項按鈕啦！！！  

摘自  雲淡風輕、僅此一抹