Einblenden/Ausblenden von divs basiert auf radio-button-Auswahl

Habe ich bekommen, so weit wie das zeigen eines bestimmten div-basierend auf der Auswahl der "150" und "3m" aber ich kann nicht das div zu verstecken, wenn beide nicht ausgewählt sind?

Folgenden Code:

JS:

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

HTML:

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

versuchen Sie es mit diesem $('input[value="100"], input[value="3m"],input[value="150"], input[value="6m"]')
Sorry, ich will nur, es zu zeigen, wenn Sie "100" und "3m", werde ich ändern, nun die Frage.

InformationsquelleAutor user3181828 | 2016-09-15

Derzeit sind Sie nur die Aktualisierung die Sichtbarkeit des div Elemente, wenn die 100 oder 3m radio-button geändert wird - Sie aktualisieren möchten, die Sichtbarkeit der div Elemente auf jedem radio-button ändern, indem Sie Ihre Wähler:

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

$('input')

JS:

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

HTML:

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

Perfekt! Vielen Dank!
Darf ich Fragen, wie dann fügen Sie die Funktion zur Anzeige der nächsten div (.d21), wenn "150" und "3m" gewählt wird? fiddle: jsfiddle.net/gqf2o2mm/5
sicher - viel die gleiche Weise mit dem Selektor und der .d21 Klasse, um Ihre div: jsfiddle.net/gqf2o2mm/6
Sorry, ich habe die falsche link: jsfiddle.net/xyhjucs7
Die .d21 div innerhalb des .d11 div, die versteckt ist. Sie müssen unhide .d11 zu zeigen .d21 oder verschieben .d21 außerhalb der .d11 div: jsfiddle.net/xyhjucs7/1
Fantastisch, vielen Dank!

InformationsquelleAutor mechenbier

Für radio-buttons, das change-Ereignis wird nur ausgelöst, wenn der button wird geprüft, nicht, wenn es nicht aktiviert.

Eine mögliche Lösung ist, zu binden, das change-Ereignis an alle (beteiligten) Eingänge.

JS:

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

HTML:

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

Darf ich Fragen, wie dann fügen Sie die Funktion zur Anzeige der nächsten div (.d21), wenn "150" und "3m" gewählt wird? fiddle: jsfiddle.net/gqf2o2mm/5
Sorry, ich habe den falschen link: jsfiddle.net/xyhjucs7

InformationsquelleAutor Mike Scotty

Ich würde es wie folgt mit der filter Funktion und die :checked selector:

JS:

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

});

HTML:

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

InformationsquelleAutor Pete

Müssen Sie alle radio-buttons der id oder dem Namen zu tun, die Funktionalität

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

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

überprüfen Sie die Geige und ließ mich wissen, dass es ist, was Sie benötigt oder nicht

Fiddle

InformationsquelleAutor Tanmay

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

InformationsquelleAutor Parthasarathy

Verwenden Sie den folgenden javascript-code statt. . .set change listener auf 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();
    }
  });
});

InformationsquelleAutor Ravikiran kalal

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.