JQuery Genel olarak, Evet/Hayır Radyo düğmesindeki bölüm içindeki bölümü göster/Gizle

Question

Temel olarak, Evet/Hayır Radyo düğmesini tıklatarak div'i göstermek/gizlemek istedim. Ayrıca aşağıdaki fiddle linkinde örnek tipler yaptım. Bu Jenerik'i yapmak istiyorum, bir fonksiyonun tüm evet/hayır soruları için yapabileceği gibi. ve jQuery'deki condtion varsa çoklu önlemek istiyorum.

<div class="container"> 
     <div class="panel panel-default"> 
<div class="panel-body"> 
    <div class="well well-sm"> 
     <label class="control-label">1) Are you a Student??</label> 
     <div class="control-group"> 
      <label class="radio-inline"> 
       <input type="radio" name="student" id="studentYes" value="yes"> Yes 
      </label> 
      <label class="radio-inline"> 
       <input type="radio" name="student" id="studentNo" value="no"> No 
      </label> 
     </div> 

     <div id="stdTypes" class="studentsType"> 

      <label class="control-label">1.1) Are you a Graduate Student?</label> 
      <div class="control-group"> 
       <label class="radio-inline"> 
        <input type="radio" name="gradstd" id="gradstd1" value="yes"> Yes 
       </label> 
       <label class="radio-inline"> 
        <input type="radio" name="gradstd" id="gradstd2" value="no"> No 
       </label> 
      </div> 
      <div class="departName"> 
       <label class="control-label">1.2) Please Enter your Department?</label> 
       <div class="control-group"> 
        <input type="text" /> 
       </div> 
      </div> 

     </div> 
    </div> 
    <div class="well well-sm"> 
     <label class="control-label">2) Are you earning for your living?</label> 
     <div class="control-group"> 
      <label class="radio-inline"> 
       <input type="radio" name="living" value="yes"> Yes 
      </label> 
      <label class="radio-inline"> 
       <input type="radio" name="living" value="no"> No 
      </label> 
     </div> 

     <div class="earning"> 

      <label class="control-label">2.1) How much do you earn?</label> 
      <div class="control-group"> 
       <input type="text" /> 
      </div> 

     </div> 



    </div> 

Benim jquery'm buna bak. Fiddle için

$('input[name="student"]:radio').change(function() { 
    var radio_value = ($('input:radio[name="student"]:checked').val()); 
    if (radio_value == 'yes') { 
     $('.studentsType').slideDown("fast"); 
    } 
    else if (radio_value == 'no') { 
     $('.studentsType').slideUp("fast"); 
    } 
}); 

$('input[name="gradstd"]:radio').change(function() { 
    var radio_value = ($('input:radio[name="gradstd"]:checked').val()); 
    if (radio_value == 'yes') { 
     $('.departName').slideDown("fast"); 
    } 
    else if (radio_value == 'no') { 
     $('.departName').slideUp("fast"); 
    } 
}); 
$('input[name="living"]:radio').change(function() { 
    var radio_value = ($('input:radio[name="living"]:checked').val()); 
    if (radio_value == 'yes') { 
     $('.earning').slideDown("fast"); 
    } 
    else if (radio_value == 'no') { 
     $('.earning').slideUp("fast"); 
    } 
}); 

Bağlantılar: http://jsfiddle.net/mgrgfqfd/

yardım edin !!

Answer 1

Hangi DIV'nin değiştirilmesi gerektiğini belirtmek için radyo düğmelerinde data özniteliğini kullanabilirsiniz. Kodun altında

$(':radio[data-rel]').change(function() { 
 
    var rel = $("." + $(this).data('rel')); 
 
    if ($(this).val() == 'yes') { 
 
    rel.slideDown(); 
 
    } else { 
 
    rel.slideUp(); 
 
    rel.find(":text,select").val(""); 
 
    rel.find(":radio,:checkbox").prop("checked", false); 
 
    } 
 
});

.studentsType, 
 
.departName, 
 
.earning { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-body"> 
 
     <div class="well well-sm"> 
 
     <label class="control-label">1) Are you a Student??</label> 
 
     <div class="control-group"> 
 
      <label class="radio-inline"> 
 
      <input type="radio" name="student" id="studentYes" value="yes" data-rel="studentsType">Yes 
 
      </label> 
 
      <label class="radio-inline"> 
 
      <input type="radio" name="student" id="studentNo" value="no" data-rel="studentsType">No 
 
      </label> 
 
     </div> 
 

 
     <div id="stdTypes" class="studentsType"> 
 

 
      <label class="control-label">1.1) Are you a Graduate Student?</label> 
 
      <div class="control-group"> 
 
      <label class="radio-inline"> 
 
       <input type="radio" name="gradstd" id="gradstd1" value="yes" data-rel="departName">Yes 
 
      </label> 
 
      <label class="radio-inline"> 
 
       <input type="radio" name="gradstd" id="gradstd2" value="no" data-rel="departName">No 
 
      </label> 
 
      </div> 
 
      <div class="departName"> 
 
      <label class="control-label">1.2) Please Enter your Department?</label> 
 
      <div class="control-group"> 
 
       <input type="text" /> 
 
      </div> 
 
      </div> 
 

 
     </div> 
 
     </div> 
 
     <div class="well well-sm"> 
 
     <label class="control-label">2) Are you earning for your living?</label> 
 
     <div class="control-group"> 
 
      <label class="radio-inline"> 
 
      <input type="radio" name="living" value="yes" data-rel="earning">Yes 
 
      </label> 
 
      <label class="radio-inline"> 
 
      <input type="radio" name="living" value="no" data-rel="earning">No 
 
      </label> 
 
     </div> 
 

 
     <div class="earning"> 
 

 
      <label class="control-label">2.1) How much do you earn?</label> 
 
      <div class="control-group"> 
 
      <input type="text" /> 
 
      </div> 
 

 
     </div> 
 

 

 

 
     </div> 
 

 
    </div> 
 
    <div class="panel-footer">Panel footer</div> 
 
    </div> 
 

 
</div>

Answer 2

Eğer yapının bu tür tutarsanız kodun küçük bir bit elde edilebilir:

http://jsfiddle.net/mgrgfqfd/2/

HTML:

<div class="container"> 
      <div class="panel panel-default"> 
    <div class="panel-body"> 
     <div class="well well-sm"> 
      <label class="control-label">1) Are you a Student??</label> 

      <div class="control-group" data-target="gruduate"> 
       <label class="radio-inline"> 
        <input type="radio" name="student" value="yes"> Yes 
       </label> 
       <label class="radio-inline"> 
        <input type="radio" name="student" value="no"> No 
       </label> 
      </div> 

      <div class="optional"> 

       <label class="control-label">1.1) Are you a Graduate Student?</label> 
       <div class="control-group"> 
        <label class="radio-inline"> 
         <input type="radio" name="gradstd" id="gradstd1" value="yes"> Yes 
        </label> 
        <label class="radio-inline"> 
         <input type="radio" name="gradstd" id="gradstd2" value="no"> No 
        </label> 
       </div> 
       <div class="optional"> 
        <label class="control-label">1.2) Please Enter your Department?</label> 
        <div class="control-group"> 
         <input type="text" /> 
        </div> 
       </div> 

      </div> 
     </div> 

     <div class="well well-sm"> 
      <label class="control-label">2) Are you earning for your living?</label> 
      <div class="control-group"> 
       <label class="radio-inline"> 
        <input type="radio" name="living" value="yes"> Yes 
       </label> 
       <label class="radio-inline"> 
        <input type="radio" name="living" value="no"> No 
       </label> 
      </div> 

      <div class="optional"> 

       <label class="control-label">2.1) How much do you earn?</label> 
       <div class="control-group"> 
        <input type="text" /> 
       </div> 

      </div> 
     </div> 

    </div> 
    <div class="panel-footer">Panel footer</div> 
</div> 

</div> 

JS:

$('input:radio').on('change', function() { 
    $(this).parents('.control-group').next('div.optional').toggle($(this).val() == 'yes'); 
}); 

Sadece evet/hayır düğmelerinizin kontrol grubu içinde olduğundan emin olun ve oransal elemanlar bir divanın içindeki bir div ile hemen sonra.

Answer 3

div sonraki bulmak ve bu kod ve IFS birden gereksiz çizgileri önlemek için yardımcı olur jquery kayan gerçekleştirecektir.

$('input:radio').on('change', function() {//Register change event for all radio button     
      if ($(this).val() == 'yes') {//check value of selected radio is yes 
       $(this).parent().parent().next('div').slideDown("fast"); 
      } 
      else if ($(this).val() == 'no') {//check value of selected radio is no 
       $(this).parent().parent().next('div').slideUp("fast"); 
      } 

     });