Переключающий CheckBox - PullRequest
Новая
       17

Переключающий CheckBox

0 голосов
/ 26 сентября 2019 

      <form>

		Age: <input type="checkbox" class="first" value="Below 10">Below 10
			<input type="checkbox" class="first" value="Below 20"> Below 20
			<input type="checkbox" class="first" value="Below 30">Below 30
			<br>

			You have clicked: 
		<span id="maClass">
			
		</span>

	  </form>
	  <script type="text/javascript">
			var maClass = document.querySelector("#maClass");
			var first = document.querySelectorAll(".first");

			var isClicked = false;
			var i=0;
			for(i; i<first.length ; i++){

			  first[i].addEventListener("click", function() {
	
				if(isClicked){
					maClass.style.display = "none";
					isClicked = false;
				}else{
					maClass.style.display = "inline";
					maClass.style.display = first[i].getAttribute("value");
					isClicked = true; 
			    }

			  });
		    }
	  </script>

Я попытался переключить эти 3 флажка.Я использовал eventListener в Javascript.Я использовал одно и то же имя класса для 3 разных флажков.Это потому, что это поможет мне сохранить все решение в одном массиве.Но это не работает Я не могу заставить его переключаться.Пожалуйста, помогите

1 Ответ

0 голосов
/ 26 сентября 2019

Похоже, вы пытаетесь изменить значение <span id="maClass"> при нажатии на флажки.

На самом деле вы должны использовать радиокнопки, если не хотите, чтобы все они были выбраны одновременно.время.И он может иметь гораздо более простой код JS (например, нет необходимости сохранять isClicked или тому подобное).

Вот обновленный код: 

<body>
  <form>

    Age: <input type="radio" name="first" class="first" value="Below 10">Below 10
        <input type="radio" name="first" class="first" value="Below 20"> Below 20
        <input type="radio" name="first" class="first" value="Below 30">Below 30
        <br>

        You have clicked: 
    <span id="maClass">

    </span>

  </form>
  <script type="text/javascript">
        var maClass = document.querySelector("#maClass");
        var first = document.querySelectorAll(".first");

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

          first[i].addEventListener("click", function(e) {
                maClass.innerHTML = e.target.value;
          });
        }
  </script>
</body>
...