Jquery radio button

JQuery 真的非常的强大，个人觉得主要功能还必须归结到它的Selector的设计上，非常的灵活，完完全全可以访问页面的任何内容。

今天又再次小试牛刀，看看如何使用简单的JS语句来获得Radio Button的选择情况。

HTML 代码如下：

<inputtype=“radio” name=“type_choose” value=“1″ > Type1
<input type=“radio” name=“type_choose” value=“2″ checked=checked> Type 2

jQuery 代码如下：

var type = 0;
$("input[name='type_choose]").each(function (index){
    if (this.checked){
         type = this.value;
    }
});

我把radio button 的名称定义成了type_choose，jQuery的先定位到所有input标签，然后过滤只留下name等于type_choose的标签，其实也可 以使用$(“input[type='radio']“)来找到radio button，不过这种缺点就是页面上只有一个radio button group，所以可能还是使用name更好些。

最后使用each函数来遍历找到的所有radio button，函数中的this就是radio button，如何他的checked属性为真，则表示用户选择了这个radio button，把这个radio button的值保存在type变量中。

整个算法还是挺紧凑简单的。

$(document).ready(function($) {
 
    var controlItems = '#cimbStaffName, #cimbStaffRelation';
   
    //show cimbStaffName and cimbStaffRelation
    $('[name="cimbRelatedStaff"]').on('click', function() {
        showCimbStaffNameAndRelation(controlItems,$(this));
      
    });
 
    //default value of cimbRelatedStaff
    $("input[name='cimbRelatedStaff']").each(function (index){
        if (this.checked){
           showCimbStaffNameAndRelation(controlItems,$(this));
        }
    });

 
 
 
 
 
  
   function showCimbStaffNameAndRelation(list,controller){
   $(list).each(function() {
        var tr = $(this).parents('tr').first();
        if ($(controller).val() === 'true') {

            $(tr).show();
        }
        else {
            $(tr).hide();
        }
     
       
    });
    }
  
 

});