Question

我有两个单选按钮，分别是“是”和“否”。单击“否”按钮时，将显示一个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>

Answer 1

  $(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更好地显示

删除伪元素：使用jquery

1 个答案: