隐藏单选按钮选项

Question

我有一个radio buttons 选项，我想要它，如果用户clicks 选择“最高通话费用”，那么hides 选择“按费用选择”单选按钮。

参考代码：

 <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>

谢谢，

肖恩

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

试试这个。

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

Answer 3

您可以为广播组绑定更改事件，然后根据条件执行您的操作 -

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

您想要 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);
    }
  })
});