我有两个单选按钮,分别是“是”和“否”。单击“否”按钮时,将显示一个div,单击“是”按钮,则该div被隐藏。我的问题是按钮上的复选标记没有被删除
$(function() {
$(".yesRadionbtn").click(function() {
$(this).closest('.divHide').nextAll('div').hide(500);
});
$(".noRadionbtn").click(function() {
$(this).closest('.divHide').next('div').show(500);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-xs-12 divHide" id="quesOne">
<h5>QUESTION <span class="quesNum">1 of 7</span></h5>
<div class="col-md-3">
<label class="btnContainer">YES
<input type="radio" name="radio" class="yesRadionbtn">
<span class="checkmark"></span>
</label>
</div>
<div class="col-md-3 noDiv">
<label class="btnContainer">NO
<input type="radio" name="radio" class="noRadionbtn">
<span class="checkmark"></span>
</label>
</div>
</div>
<div class="col-xs-12 divHide hiddenSec">
<h5>QUESTION <span class="quesNum">2 of 7</span></h5>
<ul class="star">
<li>
Will any applicant have other health insurance in force on the policy effective date or be eligible for Medicaid?
</li>
</ul>
<div class="col-md-3">
<label class="btnContainer">YES
<input type="radio" name="Secradio" class="yesRadionbtn">
<span class="checkmark"></span>
</label>
</div>
<div class="col-md-3 noDiv">
<label class="btnContainer">NO
<input type="radio" name="Secradio" class="noRadionbtn">
<span class="checkmark"></span>
</label>
</div>
</div>
答案 0 :(得分:0)
$(function() {
$(".yesRadionbtn").click(function() {
$(this).closest('.divHide').nextAll('div').hide(500);
setTimeout(function() {
$(".yesRadionbtn").prop('checked', false);
}, 500);
});
$(".noRadionbtn").click(function() {
$(this).closest('.divHide').next('div').show(500);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-xs-12 divHide" id="quesOne">
<h5>QUESTION <span class="quesNum">1 of 7</span></h5>
<div class="col-md-3">
<label class="btnContainer">YES
<input type="radio" name="radio" class="yesRadionbtn">
<span class="checkmark"></span>
</label>
</div>
<div class="col-md-3 noDiv">
<label class="btnContainer">NO
<input type="radio" name="radio" class="noRadionbtn">
<span class="checkmark"></span>
</label>
</div>
</div>
<div class="col-xs-12 divHide hiddenSec">
<h5>QUESTION <span class="quesNum">2 of 7</span></h5>
<ul class="star">
<li>
Will any applicant have other health insurance in force on the policy effective date or be eligible for Medicaid?
</li>
</ul>
<div class="col-md-3">
<label class="btnContainer">YES
<input type="radio" name="Secradio" class="yesRadionbtn">
<span class="checkmark"></span>
</label>
</div>
<div class="col-md-3 noDiv">
<label class="btnContainer">NO
<input type="radio" name="Secradio" class="noRadionbtn">
<span class="checkmark"></span>
</label>
</div>
</div>
您可以使用setTimeout更好地显示