Показать/скрыть divs на основе выбора переключателя

Я дошел до того, что показывал определенный div, основанный на выборе «150» и «3 м», но я не могу заставить div спрятаться, если обе эти арены Вы выбрали?Показать/скрыть divs на основе выбора переключателя

код ниже:

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

источник

2016-09-15 user3181828

попробовать с этим $ ('ввода [значение = «100»], вход [значение = «3 м»], вход [значение = «150»], вход [значение = «6 м»] ') –

Извините, я хочу, чтобы он показывался, если вы выберете «100» и «3 м», сейчас я исправлю вопрос. – user3181828

В настоящее время вы только обновляя видимость div элементов, когда кнопка 100 или 3м радио меняется - вы хотите обновить видимость 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>

источник

2016-09-15 12:49:47 mechenbier

Отлично! Спасибо! – user3181828

Могу ли я спросить, как добавить функцию, чтобы показать следующий div (.d21), если выбраны «150» и «3m»? скрипка: https: // jsfiddle.net/gqf2o2mm/5/ – user3181828

@ user3181828 уверен - точно так же, как и селектор и класс .d21' для вашего div: https://jsfiddle.net/gqf2o2mm/6/ – mechenbier

Для радиокнопок, событие изменения срабатывает только тогда, когда кнопка получает чек, не тогда, когда он получает бесконтрольно.

Возможное решение - привязать событие изменения ко всем (участвующим) входам.

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

источник

2016-09-15 12:49:28

Могу ли я спросить, как добавить функцию, чтобы показать следующий div (.d21), если выбраны «150» и «3m»? fiddle: jsfiddle.net/gqf2o2mm/5 – user3181828

Извините, я отправил неправильную ссылку: jsfiddle.net/xyhjucs7 – user3181828

Вы должны поместить все кнопки радио идентификатор или имя, чтобы сделать функциональные возможности

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

проверка скрипку и дайте мне знать что это то, что вам нужно или нет

Fiddle

источник

2016-09-15 12:50:45 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(); 
    } 
});

источник

2016-09-15 12:50:49 Parthasarathy

Используйте следующий код яваскрипта вместо. , .С изменить слушатель 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(); 
    } 
    }); 
});

источник

2016-09-15 12:58:26

Я хотел бы сделать это как следующее с помощью функции 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>

источник

2016-09-15 12:58:46 Pete

Показать/скрыть divs на основе выбора переключателя

ответ

Смежные вопросы