基于单选按钮选择显示/隐藏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

目前在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>

Answer 2

单选按钮，当按钮被选中，而不是当它得到选中时才会触发更改事件。

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

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

你需要把所有的单选按钮标识或名称做功能

<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

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代码来代替。 。 .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(); 
    } 
    }); 
}); 

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>