2012-06-26 8 views
0

У меня есть группа переключателей с названием «periodType». В этой группе есть один переключатель, который ведет себя так же, как другие, за исключением того, что он отображает дополнительный div. Как я могу узнать, когда этот конкретный переключатель проверяется, как функция изменения ниже довольно общая для всех переключателей в группе:получить идентификатор группы переключателей в JQuery

$('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

Смежные вопросы