[英]Show/Hide divs based on radio button selection
我已經根據“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>
目前你只更新的知名度div
元素時的100或三米托單選按鈕改變-要更新的知名度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>
對於單選按鈕,更改事件僅在按鈕被選中時觸發,而不是在取消選中時觸發。
一個可能的解決方案是將更改事件綁定到所有(涉及的)輸入。
$(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>
我會使用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>
你需要把所有的單選按鈕 id 或 name 放在一起來完成這個功能
<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();
}
});
});
檢查小提琴,讓我知道它是否是您需要的
$(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();
}
});
請改用以下 javascript 代碼。 . .set change listener on 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();
}
});
});
如果您使用的是 bootstrap css,您甚至可以使代碼更具可移植性。
$(document).ready(function () {
$('input.rbtoggle').change(function () {
$('div.dvtoggle').toggleClass('d-none');
});
});
其中 'rbtoggle' 只是您的單選按鈕共享的一個類,而 'dvtoggle' 是一個用於顯示或隱藏 div 的類。
如果您希望最初隱藏 div,請向其中添加類“d-none”。 例如
<div class'dvtoggle d-none'>
<!-- other html goes here -->
</div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.