隱藏單選按鈕選項

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

你想要的東西像這樣？

這取決於您到底想要發生什么，然后可以更改代碼

 <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);
    }
  })
});