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

尝试用此$（'输入[值=“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>

完美！非常感谢！ – 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>

如果选择“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

答

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

答

改变监听我会做类似下面使用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>

基于单选按钮选择显示/隐藏div

相关推荐