隱藏一個單選按鈕選項

Question

我有一個radio buttons的選擇，我希望它如果用戶clicks上的「最高通話費用」，然後它​​「按成本選擇」單選按鈕。

代碼以供參考：

<div id="radioGroup"> 
 
    
 
    <h3>Select by Amount: </h3> 
 
    \t <input type="radio" name="dialinfo" value="mostdialled"> <label for="mostdialled">Most Dialled Digits</label><br> 
 
    \t <input type="radio" name="dialinfo" value="highestcost"> <label for="highestcost">Highest Costing Calls</label> 
 
    
 
    <br> 
 
    
 
    <h3>Select by Location: </h3> 
 
    \t <input type="radio" name="callLocation"> <label for="callLocation">Inside the UK</label><br> 
 
    \t <input type="radio" name="callLocation"> <label for="callLocation">International</label> 
 
    
 
    
 
    <h3>Select by Cost: </h3> 
 
    \t <input type="radio" name="costradio"> <label for="costradio">Less than &pound;1</label><br> 
 
    \t <input type="radio" name="costradio"> <label for="costradio">More than &pound;1</label><br> 
 
    \t <input type="radio" name="costradio"> <label for="costradio">More than &pound;5</label><br> 
 
    \t <input type="radio" name="costradio"> <label for="costradio">More than &pound;10</label> 
 
    
 
    
 
    <h3>Select Duration: </h3> 
 
    \t <input type="radio" name="callDuration"> <label for="callDuration">Less than 60s</label><br> 
 
    \t <input type="radio" name="callDuration"> <label for="callDuration">More than 60s</label><br> 
 
    \t <input type="radio" name="callDuration"> <label for="callDuration">More than 1hr</label><br> 
 
    \t <input type="radio" name="callDuration"> <label for="callDuration">More than 5hrs</label> 
 
    </div>

謝謝

肖恩

Answer 1

我已經添加的div，這樣我可以識別區，引發了jQuery改變功能

嘗試以下操作：

$("#radioGroup #select_amount input").change(function() { 
 
    if ($(this).val() == "highestcost") { 
 
    $("#select_cost").hide(); 
 
    } else { 
 
    $("#select_cost").show(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> 
 
<div id="radioGroup"> 
 

 
    <div id="select_amount"> 
 
    <h3>Select by Amount: </h3> 
 
    <input type="radio" name="dialinfo" value="mostdialled"> 
 
    <label for="mostdialled">Most Dialled Digits</label> 
 
    <br> 
 
    <input type="radio" name="dialinfo" value="highestcost"> 
 
    <label for="highestcost">Highest Costing Calls</label> 
 
    </div> 
 
    <br> 
 

 
    <h3>Select by Location: </h3> 
 
    <input type="radio" name="callLocation"> 
 
    <label for="callLocation">Inside the UK</label> 
 
    <br> 
 
    <input type="radio" name="callLocation"> 
 
    <label for="callLocation">International</label> 
 

 
    <div id="select_cost"> 
 
    <h3>Select by Cost: </h3> 
 
    <input type="radio" name="costradio"> 
 
    <label for="costradio">Less than &pound;1</label> 
 
    <br> 
 
    <input type="radio" name="costradio"> 
 
    <label for="costradio">More than &pound;1</label> 
 
    <br> 
 
    <input type="radio" name="costradio"> 
 
    <label for="costradio">More than &pound;5</label> 
 
    <br> 
 
    <input type="radio" name="costradio"> 
 
    <label for="costradio">More than &pound;10</label> 
 
    </div> 
 

 
    <h3>Select Duration: </h3> 
 
    <input type="radio" name="callDuration"> 
 
    <label for="callDuration">Less than 60s</label> 
 
    <br> 
 
    <input type="radio" name="callDuration"> 
 
    <label for="callDuration">More than 60s</label> 
 
    <br> 
 
    <input type="radio" name="callDuration"> 
 
    <label for="callDuration">More than 1hr</label> 
 
    <br> 
 
    <input type="radio" name="callDuration"> 
 
    <label for="callDuration">More than 5hrs</label> 
 
</div>

Answer 2

你可以在改變綁定事件單選按鈕組，然後做你的東西條件 - 這

$('input[type=radio][name=dialinfo]').change(function() { 
      if (this.value == 'highestcost') { 
       $('input[type=radio][name=costradio]').hide(); 
      } 
      else { 
      $('input[type=radio][name=costradio]').show(); 
      } 

     }); 

Answer 3

你要像this？

這要看你到底要發生的，那麼代碼可以改變

<div id="radioGroup"> 

    <div id="amount-group"> 
    <h3>Select by Amount: </h3> 
     <input type="radio" name="dialinfo" value="mostdialled" id='mostdialled'> <label for="mostdialled">Most Dialled Digits</label><br> 
     <input type="radio" name="dialinfo" value="highestcost" id='highestcost'> <label for="highestcost">Highest Costing Calls</label> 
    </div> 
<br> 

<h3>Select by Location: </h3> 
    <input type="radio" name="callLocation"> <label for="callLocation">Inside the UK</label><br> 
    <input type="radio" name="callLocation"> <label for="callLocation">International</label> 


<h3>Select by Cost: </h3> 
    <input type="radio" name="costradio"> <label for="costradio">Less than &pound;1</label><br> 
    <input type="radio" name="costradio"> <label for="costradio">More than &pound;1</label><br> 
    <input type="radio" name="costradio"> <label for="costradio">More than &pound;5</label><br> 
    <input type="radio" name="costradio"> <label for="costradio">More than &pound;10</label> 


<h3>Select Duration: </h3> 
    <input type="radio" name="callDuration"> <label for="callDuration">Less than 60s</label><br> 
    <input type="radio" name="callDuration"> <label for="callDuration">More than 60s</label><br> 
    <input type="radio" name="callDuration"> <label for="callDuration">More than 1hr</label><br> 
    <input type="radio" name="callDuration"> <label for="callDuration">More than 5hrs</label> 
</div> 

$(document).ready(function() { 
    $('#amount-group').click(function() { 
    if ($('#mostdialled').is(':checked') || $('#highestcost').is(':checked')) { 
     $('#amount-group').slideUp(1000); 
    } 
    }) 
}); 

Answer 4

剛剛嘗試這一點，

$(document).ready(function(){ 
 
    $('input[name="dialinfo"]').on('change', function(){ 
 
    var val = $(this).val(); 
 
    //alert(val); 
 
    if(val == "highestcost"){ 
 
    $('input[name="costradio"]').eq(0).prev('h3').hide(); 
 
    $('input[name="costradio"]').next('label').hide(); 
 
    $('input[name="costradio"]').hide();  
 
    } 
 
    else{ 
 
    $('input[name="costradio"]').eq(0).prev('h3').show(); 
 
    $('input[name="costradio"]').next('label').show(); 
 
    $('input[name="costradio"]').show();  
 
    } 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="radioGroup"> 
 

 
<h3>Select by Amount: </h3> 
 
    <input type="radio" name="dialinfo" value="mostdialled"> <label for="mostdialled">Most Dialled Digits</label><br> 
 
    <input type="radio" name="dialinfo" value="highestcost"> <label for="highestcost">Highest Costing Calls</label> 
 

 
<br> 
 

 
<h3>Select by Location: </h3> 
 
    <input type="radio" name="callLocation"> <label for="callLocation">Inside the UK</label><br> 
 
    <input type="radio" name="callLocation"> <label for="callLocation">International</label> 
 

 

 
<h3>Select by Cost: </h3> 
 
    <input type="radio" name="costradio"> <label for="costradio">Less than &pound;1</label><br> 
 
    <input type="radio" name="costradio"> <label for="costradio">More than &pound;1</label><br> 
 
    <input type="radio" name="costradio"> <label for="costradio">More than &pound;5</label><br> 
 
    <input type="radio" name="costradio"> <label for="costradio">More than &pound;10</label> 
 

 

 
<h3>Select Duration: </h3> 
 
    <input type="radio" name="callDuration"> <label for="callDuration">Less than 60s</label><br> 
 
    <input type="radio" name="callDuration"> <label for="callDuration">More than 60s</label><br> 
 
    <input type="radio" name="callDuration"> <label for="callDuration">More than 1hr</label><br> 
 
    <input type="radio" name="callDuration"> <label for="callDuration">More than 5hrs</label> 
 
</div>