Show/Hide 基于单选按钮选择的 div

Question

我已经根据“150”和“3m”的选择显示了某个 div，但如果这两个都没有，我就无法隐藏 div没有被选中？

代码如下：

$(document).ready(function() {
  $('input[value="100"], input[value="3m"]').change(function() {
    if ($('input[value="100"]').is(':checked') && $('input[value="3m"]').is(':checked')) {
      $('div').show();
    } else {
      $('div').hide();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>100</label>
<input class="amount" type="radio" name="amount" value="100" />
<label>150</label>
<input class="amount" type="radio" name="amount" value="150" />

<br>
<br>

<label>3</label>
<input class="month" type="radio" name="month" value="3m" />
<label>6</label>
<input class="month" type="radio" name="month" value="6m" />

<div style="display: none;">
  <div class="interest">
    £40
  </div>
  <div class="total-payable">
    £140
  </div>
  <div class="monthly-payment">
    £46.67
  </div>
  <div class="weekly-payment">
    £10.77
  </div>
</div>

Answer 1

对于单选按钮，更改事件仅在按钮被选中时触发，而不是在取消选中时触发。

一个可能的解决方案是将更改事件绑定到所有（涉及的）输入。

$(document).ready(function() {
  $('input').change(function() {
    if ($('input[value="100"]').is(':checked') && $('input[value="3m"]').is(':checked')) {
      $('div').show();
    }
    else {
      $('div').hide();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>100</label>
<input class="amount" type="radio" name="amount" value="100" />
<label>150</label>
<input class="amount" type="radio" name="amount" value="150" />

<br><br>

<label>3</label>
<input class="month" type="radio" name="month" value="3m" />
<label>6</label>
<input class="month" type="radio" name="month" value="6m" />

<div style="display: none;">
<div class="interest">
£40
</div>
<div class="total-payable">
£140
</div>
<div class="monthly-payment">
£46.67
</div>
<div class="weekly-payment">
£10.77
</div>
</div>

Answer 2

目前您仅在 100 或 3m 单选按钮更改时更新 div 元素的可见性 - 您希望在任何单选按钮更改时更新 div 元素的可见性通过更改您的选择器：

$('input[value="100"], input[value="3m"]')

到

$('input')

$(document).ready(function() {
  $('input').change(function() {
    if ($('input[value="100"]').is(':checked') && $('input[value="3m"]').is(':checked')) {
      $('div').show();
    }
    else {
      $('div').hide();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>100</label>
<input class="amount" type="radio" name="amount" value="100" />
<label>150</label>
<input class="amount" type="radio" name="amount" value="150" />

<br><br>

<label>3</label>
<input class="month" type="radio" name="month" value="3m" />
<label>6</label>
<input class="month" type="radio" name="month" value="6m" />

<div style="display: none;">
<div class="interest">
£40
</div>
<div class="total-payable">
£140
</div>
<div class="monthly-payment">
£46.67
</div>
<div class="weekly-payment">
£10.77
</div>
</div>

Answer 3

您需要输入所有单选按钮的 ID 或名称才能实现该功能

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>100</label>
<input class="amount" type="radio" name="amount" value="100" id="100rad"/>
<label>150</label>
<input class="amount" type="radio" id="150rad"name="amount" value="150" />

<br><br>

<label>3</label>
<input class="month" type="radio" id="3mrad" name="month" value="3m" />
<label>6</label>
<input class="month" type="radio" name="month" id="6mrad" value="6m" />

<div style="display: none;">
<div class="interest">
£40
</div>
<div class="total-payable">
£140
</div>
<div class="monthly-payment">
£46.67
</div>
<div class="weekly-payment">
£10.77
</div>
</div>

js

$(document).ready(function() {
  $('#3mrad, #150rad,#100rad,#6mrad').change(function() {
    if ($('#150rad').is(':checked') && $('#3mrad').is(':checked')) {
      $('div').show();
    }
    else {
      $('div').hide();
    }
  });
});

检查 fiddle 让我知道它是否是您需要的

Fiddle

Answer 4

$(document).ready(function(){
    $("input[type='button']").click(function(){
        var radioValue = $("input[name='gender']:checked").val();
        if(radioValue){
            alert("Your are a - " + radioValue);
        }
    });
   if(radioValue=='male'){
     $("#divMale").show();
     $("#divFemale").hide();
   } 
   else{
     $("#divMale").hide();
     $("#divFemale").show();
   }
});

Answer 5

请改用以下 javascript 代码。 . .在 input[name="month"], input[name="amount"]

上设置更改侦听器

$(document).ready(function() {
  $('input[name="month"], input[name="amount"]').change(function() {
  console.log("haha")
    if ($('input[value="100"]').is(':checked') && $('input[value="3m"]').is(':checked')) {
      $('div').show();
    }
    else {
      $('div').hide();
    }
  });
});

Answer 6

我会使用 filter 函数和 :checked 选择器来执行以下操作：

// wrap in closure
$(function() {
  // store these in variables for better performance
  var month = $('.month'),
      amount = $('.amount'),
      toggleDiv = $('#toggle-div'); // give top level div to show an id rather than toggling all divs
  
  // use common class on radios you want to bind the event to
  $('.radio').on('change', function() {
      if (amount.filter(':checked').val() == 100 && month.filter(':checked').val() === "3m") {
         toggleDiv.show();
      } else {
         toggleDiv.hide();
      }
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>100</label>
<input class="amount radio" type="radio" name="amount" value="100" />
<label>150</label>
<input class="amount radio" type="radio" name="amount" value="150" />

<br>
<br>

<label>3</label>
<input class="month radio" type="radio" name="month" value="3m" />
<label>6</label>
<input class="month radio" type="radio" name="month" value="6m" />

<div id="toggle-div" style="display: none;">
  <div class="interest">
    £40
  </div>
  <div class="total-payable">
    £140
  </div>
  <div class="monthly-payment">
    £46.67
  </div>
  <div class="weekly-payment">
    £10.77
  </div>
</div>

Answer 7

如果您使用 bootstrap css，您甚至可以使代码更加便携。

$(document).ready(function () {
    $('input.rbtoggle').change(function () {
        $('div.dvtoggle').toggleClass('d-none');
    });
});

其中 'rbtoggle' 只是一个 class 您的单选按钮共享，而 'dvtoggle' 是一个 class div 来显示或隐藏用途。

如果您希望 div 最初隐藏，请将 class 'd-none' 添加到其中。例如

<div class'dvtoggle d-none'>
    <!-- other html goes here -->
</div>

Show/Hide 基于单选按钮选择的 div

Show/Hide divs based on radio button selection

html

javascript

jquery

show

hide