我想在 2 秒后勾选复选框，但只有当这些复选框在轮播中处于活动状态时

Question

<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="4000">
       
     <div class="carousel-inner">
        <div class="item active" >
            <h4>
                <span class="answer"><%=questions[0].getText()%></span>
                    <div>
                        <br>
      <%                for(QuestionAnswer answer:questions[0].getQuestionAnswersSet())
                        {
      %>
                        <input type="checkbox" class="answercheck <%= answer.getCorrect()==true? "checked":"unchecked" %>" />
                        <span class="answer"><%= answer.getText()%></span> 
                        <br>
      <% 
                         } 
      %>
                        <br>
                    </div>
            </h4>
        </div>

      <%
          for(int i=1;i<questions.length;i++)
          { 
      %>
        <div class="item ">
            <h4>
                <span class="answer"><%=questions[i].getText()%></span>
                <div>
                    <br>
      <%
                    for(QuestionAnswer answer:questions[i].getQuestionAnswersSet())
                       {
      %>
                            <input type="checkbox" class="answercheck <%= answer.getCorrect()==true? "checked":"unchecked" %>" />
                            <span class="answer"><%= answer.getText()%></span> 
                            <br>
      <% 
                      }
      %>
                    <br>
                </div>
            </h4>
        </div>
      <%
         } 
      %>
    </div>
    </div>
    
 <% } %>    
      
      
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
      <script>
      $(document).ready(function()
                
              {

           setTimeout(function(){ $(".checked" ).attr('checked', true)},2000);

      });
      </script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

我用过Jsp和Jquery。这里发生的事情发生在 2 秒之后，当第一个问题的答案被点击时。另一个问题的答案也在 data-interval

中提到的 4 秒后出现的轮播中打勾

我希望当问题仅在 2 秒后显示时我的正确答案复选框应该被选中并且它应该适用于轮播项目中的所有问题

Answer 1

您可以使用 setInterval 这将在每个 2 sec 时调用，然后在其中您只需要在 class 处于活动状态（当前显示幻灯片）并从其他复选框中删除 checked true。

演示代码:

$(document).ready(function()

  {
    $('#myCarousel').carousel()
    setInterval(function() {
      //remove checked
      $("#myCarousel").find(".checked").attr('checked', false)
      //add checked true to only active class
      $("#myCarousel").find(".active .checked").attr('checked', true)

    }, 2000);

  });

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="4000">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <h4>
        <span class="answer">Somethings...</span>
        <div>
          <br>

          <input type="checkbox" class="answercheck checked" />
          <span class="answer">A</span>
          <input type="checkbox" class="answercheck" />
          <span class="answer">B</span>
          <input type="checkbox" class="answercheck" />
          <span class="answer">C</span>

          <br>

          <br>
        </div>
      </h4>
    </div>
    <div class="carousel-item">
      <h4>
        <span class="answer">Somethings... 2</span>
        <div>
          <br>

          <input type="checkbox" class="answercheck" />
          <span class="answer">A</span>
          <input type="checkbox" class="answercheck" />
          <span class="answer">B</span>
          <input type="checkbox" class="answercheck checked" />
          <span class="answer">C</span>

          <br>

          <br>
        </div>
      </h4>
    </div>
    <div class="carousel-item">
      <h4>
        <span class="answer">Somethings... 3</span>
        <div>
          <br>

          <input type="checkbox" class="answercheck " />
          <span class="answer">A</span>
          <input type="checkbox" class="answercheck checked" />
          <span class="answer">B</span>
          <input type="checkbox" class="answercheck" />
          <span class="answer">C</span>

          <br>

          <br>
        </div>
      </h4>
    </div>

  </div>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

我想在 2 秒后勾选复选框，但只有当这些复选框在轮播中处于活动状态时

I want to tick checkbox after 2 seconds but only when those checkboxes are active in carousel

html

javascript

jquery

jsp

carousel