基於單選按鈕選擇顯示/隱藏div

我已經根據選擇的「150」和「3m」顯示了特定的div，但是如果兩者都不是這樣，我就不能隱藏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>

來源

2016-09-15 user3181828

嘗試用此$（'輸入[值=「100」]，輸入[值=「3m」]，輸入[值=「150」]，輸入[值=「6m」]'） –

對不起，我只希望它顯示，如果你選擇「100」「3m」，我現在要修改這個問題。 – user3181828

目前在100或三米託單選按鈕改變你只更新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>

來源

2016-09-15 12:49:47 mechenbier

完美！非常感謝！ – user3181828

如果選擇「150」和「3m」，我可以問如何添加函數來顯示下一個div（.d21）？小提琴：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

如果選擇「150」和「3m」，我可以問如何添加函數來顯示下一個div（.d21）？小提琴：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

使用下面的JavaScript代碼來代替。。 .SET上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

基於單選按鈕選擇顯示/隱藏div

回答

相關問題