2012-06-26 17 views
0

我有一组名称为'periodType'的单选按钮。该组中有一个单选按钮的行为与其他行为相同,除了它显示额外的div。我怎样才能在特定的单选按钮被选中知道,如下的改变功能是该组中的所有单选按钮是通用:获取Jquery中单选按钮组的ID

$('input[name="periodType"]').change(function() { 
     if(this.checked) { 
      //do something (for all radio buttons) 
      //If unique radio button also do this 
     } 
    }); 

    <input type="radio" name="periodType" default> 
<input type="radio" name="periodType" default> 
<input type="radio" name="periodType" default> 
<input type="radio" name="periodType" default> 
+0

我看不到任何的div在HTML中的额外的div显示 –

回答

1

您可能希望将值添加到您的无线输入:

<input type="radio" name="periodType" value="one" default> 
<input type="radio" name="periodType" value="two" default> 
<input type="radio" name="periodType" value="three" default> 
<input type="radio" name="periodType" value="four" default> 

,然后查询该值:

$('input[name="periodType"]').change(function() { 
    if (this.value == 'three' && this.checked) { 
    //do something (for all radio buttons) 
    //If unique radio button also do this 
    } 
}); 
0
$('input[name="periodType"]').change(function() { 
     if(this.checked) { 
      //do something (for all radio buttons) 
      //If unique radio button also do this 
      var idval = $(this).attr("id"); 
      if (idval == "something") 
      { 
      //do something 
      } 
     } 
    }); 
0

可能是你正在寻找这样的事情。我已经将每个收音机添加到它自己的div中,以显示改变的行为。请让我知道,如果你有任何问题。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
      "http://www.w3.org/TR/html4/loose.dtd"> 
    <html> 
    <head> 
     <title></title> 
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 

     <style type="text/css"> 
      .selected{background-color: #fad42e;} 
      .notSelected{background-color: #6f6e73;} 
     </style> 
     <script type="text/javascript"> 


      $(document).ready(function() { 


       $('input[name="periodType"]').change(function() { 
        $(this).parent('div').removeClass(); 
        $(this).parent('div').addClass('selected'); 

        $('input[name="periodType"]') 
          .parent('div') 
          .not($(this).parent("div")) 
          .each(function(e){ 
           $(this).removeClass(); 
           $(this).addClass("notSelected"); 
          }); 
       }); 



      }); 




     </script> 
    </head> 
    <body> 

    <div> 
     <input type="radio" name="periodType" > 
    </div> 
    <div> 
     <input type="radio" name="periodType" > 
    </div> 
    <div> 
     <input type="radio" name="periodType" > 
    </div> 
    <div> 
     <input type="radio" name="periodType" > 
    </div> 

    </body> 
    </html> 
+0

@ user1038814嗨配合,从而在哪里,请注明的答案是正确的,如果我的解决方案帮助你。谢谢 – haroonxml