隐藏一个单选按钮选项

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>