Блог

Главная - Вопросы по программированию - Как проверить флажок перед отображением всплывающего окна в javascript

Как проверить флажок перед отображением всплывающего окна в javascript

#javascript #html

Вопрос:

Мне нужно проверить, установлен флажок или нет, прежде чем показывать всплывающий статический текст

Этот HTML-код содержит вопросы и ответы, которые я даю как статические в JavaScript, и содержит код всплывающего стиля.

 function validate() {
  var checkboxes = document.getElementsByName("answer1");
  var checkboxChecked = [];


  for (var i = 0; i < checkboxes.length; i  ) {

  }
}

$(document).ready(function() {
  $('#trigger').click(function() {

    const question1answer1 = document.querySelectorAll('input[name="answer1"]');
    for (const question1answer1ans of question1answer1) {

      if (question1answer1ans.checked) {
        document.getElementById('question1-answer-1').innerHTML = question1answer1ans.value;

      }
    }

    const question1answer2 = document.querySelectorAll('input[name="answer2"]');
    for (const question1answer2ans of question1answer2) {
      if (question1answer2ans.checked) {
        document.getElementById('question1-answer-2').innerHTML = question1answer2ans.value;
      }
    }

    const question1answer3 = document.querySelectorAll('input[name="answer3"]');
    for (const question1answer3ans of question1answer3) {
      if (question1answer3ans.checked) {
        document.getElementById('question1-answer-3').innerHTML = question1answer3ans.value;
      }
    }
    const question1answer4 = document.querySelectorAll('input[name="answer4"]');
    for (const question1answer4ans of question1answer4) {
      if (question1answer4ans.checked) {
        document.getElementById('question1-answer-4').innerHTML = question1answer4ans.value;
      }
    }

    const question1answer5 = document.querySelectorAll('input[name="answer5"]');
    for (const question1answer5ans of question1answer5) {
      if (question1answer5ans.checked) {
        document.getElementById('question1-answer-5').innerHTML = question1answer5ans.value;
      }
    }

    const question1answer6 = document.querySelectorAll('input[name="answer6"]');
    for (const question1answer6ans of question1answer6) {
      if (question1answer6ans.checked) {
        document.getElementById('question1-answer-6').innerHTML = question1answer6ans.value;
      }
    }

    $('#question1overlay').fadeIn(300);
  });
  $('#question1close').click(function() {
    $('#question1overlay').fadeOut(300);
  });
}); 
 #question1popup {
  max-width: 600px;
  width: 90%;
  max-height: 600px;
  height: 100%;
  padding: 20px;
  position: relative;
  background: white;
  color: green;
  margin: 20px;
  margin-left: 35em;
}

#question1popups {
  max-width: 700px;
  width: 90%;
  max-height: 600px;
  height: 82%;
  padding: 20px;
  position: relative;
  background: black;
  color: green;
  margin: 20px auto;
}

#question1overlay {
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  display: none;
}

#question1overlays {
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  display: none;
}

#question1close {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  color: #fbfbfb;
  background-color: black;
  padding: 10px;
  border-radius: 20px;
} 
 <!DOCTYPE html>
<html>

<head>
  <title></title>

  <!-- Activity needed packages -->
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
  <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>

<body>



  <fieldset id="question1">
    <legend>Pick the fruits from the following</legend>
    <br>

    <div class="row">
      <div class="col-md-2">
        <label><INPUT TYPE="checkbox" NAME="answer1" VALUE="banana"><br>banana</label>
      </div>

      <div class="col-md-2">
        <label><INPUT TYPE="checkbox" NAME="answer2" VALUE="tomato"><br>tomato</label>
      </div>


      <div class="col-md-2">
        <label><INPUT TYPE="checkbox" NAME="answer3" VALUE="carrot"><br>carrot</label>
      </div>

      <div class="col-md-2">
        <label><INPUT TYPE="checkbox" NAME="answer4" VALUE="mango"><br>mango</label>
      </div>

      <div class="col-md-2">
        <label><INPUT TYPE="checkbox" NAME="answer5" VALUE="onion"><br>onion</label>
      </div>

      <div class="col-md-2">
        <label><INPUT TYPE="checkbox" NAME="answer6" VALUE="apple"><br>apple</label>
      </div>

    </div>

  </fieldset>




  <center><button id="trigger">Check answer</button></center>
  <br>
  <br>
  <div id="question1overlay">
    <div id="question1popup">
      <div id="question1close"><i class="fas fa-times-circle"></i></div>
      <h2 style="color: #4aa0dd;text-decoration-line: underline;">These are the Correct answers</h2>
      <br>
      <p style="color: green;"><b><i class="fas fa-arrow-circle-right"></i>amp;nbspamp;nbspOption 1</b></p>
      <p style="color: green;"><b><i class="fas fa-arrow-circle-right"></i>amp;nbspamp;nbspOption 4</b></p>
      <p style="color: green;"><b><i class="fas fa-arrow-circle-right"></i>amp;nbspamp;nbspOption 6</b></p>


      <h2 style="color: #4aa0dd;text-decoration-line: underline;">Your Answers</h2>
      <p id="question1-answer-1" style="color: green;font-weight: bold;"></p>
      <p id="question1-answer-2" style="color: red;font-weight: bold;"></p>
      <p id="question1-answer-3" style="color: red;font-weight: bold;"></p>
      <p id="question1-answer-4" style="color: green;font-weight: bold;"></p>
      <p id="question1-answer-5" style="color: red;font-weight: bold;"></p>
      <p id="question1-answer-6" style="color: green;font-weight: bold;"></p>
    </div>
  </div>
  <br>

Код javascript, приведенный в статическом тексте и других сценариях, записывается вручную в HTML-код
, а не в конкретный файл js-скрипт

Ответ №1:

Проверьте, используя if-условие после нажатия кнопки

 $(document).ready(function() {
  $('#trigger').click(function() {
  //IF CONDITION
  if($('.row input:checked').length <= 0){
  alert('Please Choose Atleast One Option');
  return 1;
  }
Метки: