Блог

У меня есть этот код

const … = документ.querySelector (‘input[name=»…»]:checked’).значение;

И это работает только тогда, когда отмечены все варианты переключателей. Как сохранить ответы, даже если некоторые из них не отмечены?

Я пытался избавиться от «:checked», но это просто сохраняет первый вариант для всех, независимо от того, даже если я выбрал другой один раз. Затем я попытался выполнить следующее:

const … =документ.querySelectorAll(‘input[name =»… «]:not(:checked)’)

Но это тоже не сработало. Не мог бы кто-нибудь, пожалуйста, дать мне несколько советов о том, как заставить это работать?

html-пример 1 вопроса

   <div id="question1"  style="position:fixed; left:20px; top: 50px;"> 
      10

          <label>  <input type="radio" name="q0" value="a1" id="a1" class="radio"> IMAGE 1 <br><br><br> </label>
          <label>  <input type="radio" name="q0" value="a2" id="a2" class="radio"> IMAGE 2 <br><br><br> </label>
          <label>  <input type="radio" name="q0" value="a3" id="a3" class="radio"> IMAGE 3 <br><br><br> </label>
          <label>  <input type="radio" name="q0" value="a4" id="a4" class="radio"> IMAGE 4 <br><br><br> </label>
          <label>  <input type="radio" name="q0" value="a5" id="a5" class="radio"> IMAGE 5 <br><br><br> </label>


      </div>
  

JS

 firebase.initializeApp(config);


var messagesRef = firebase.database().ref('messages');


document.getElementById('contactForm').addEventListener('submit', submitForm);


function submitForm(e){   e.preventDefault();



  var a1 = getInputVal ('a1');   var a2 = getInputVal ('a2');   var a3
= getInputVal ('a3');   var a4 = getInputVal ('a4');   var a5 = getInputVal ('a5');





  saveMessage( a1, a2, a3,a4,a5);


  document.querySelector('.alert').style.display = 'block';


  setTimeout(function(){
    document.querySelector('.alert').style.display = 'none';   },8000);


  document.getElementById('contactForm').reset(); }

function getInputVal(id){   return document.getElementById(id).value; }


function saveMessage( a1, a2, a3,a4,a5){   var newMessageRef = messagesRef.push();   newMessageRef.set({

    a1:a1,
    a2:a2,
    a3:a3,
    a4:a4,
    a5:a5,


  }); }

function saveMessage(){   const q1 = document.querySelector('input[name="q1"]:checked').value;
  

Возможно, вам захочется установить все флажки, выполняющие querySelector, затем проверить, какой из них установлен, а какой нет. Я добавил к нему две функции, вы можете просто запустить одну из циклов for и выполнить ту же логику.

 function getUncheckedValues() {
  const obj = {};
  Array.from(document.querySelectorAll('input[type="radio"]'))
  .forEach((checkbox) => {
      obj[checkbox.value] = checkbox.checked
  });
  console.log(obj);
  return obj;
}

const resultEl = document.getElementById('checkedresult');
const resultUncheckEl = document.getElementById('uncheckedresult');

document.getElementById('showResult').addEventListener('click', () => {
  const values = getUncheckedValues();
  console.log(values);
  const newRef = firebase.database().ref('messages').push();
  newRef.set(values);
});  

 <label>  <input type="radio" name="q0" value="a1" id="a1" class="radio"> IMAGE 1 <br><br><br> </label>
          <label>  <input type="radio" name="q0" value="a2" id="a2" class="radio"> IMAGE 2 <br><br><br> </label>
          <label>  <input type="radio" name="q0" value="a3" id="a3" class="radio"> IMAGE 3 <br><br><br> </label>
          <label>  <input type="radio" name="q0" value="a4" id="a4" class="radio"> IMAGE 4 <br><br><br> </label>
          <label>  <input type="radio" name="q0" value="a5" id="a5" class="radio"> IMAGE 5 <br><br><br> </label>


<br><br>
<button id="showResult">Show checked values</button>
<br><br>
<div id="checkedresult"></div>
<div id="uncheckedresult"></div>  

Вот основной фрагмент. Это поможет вам расчистить себе путь. Просто скопируйте приведенный ниже код.

 <div id="question1"  style="position:fixed; left:20px; top: 50px;">           
    <label>  <input type="radio" name="q0" value="a1" id="a1" class="radio" onchange="checkAns()"> IMAGE 1 <br><br><br> </label>
    <label>  <input type="radio" name="q0" value="a2" id="a2" class="radio" onchange="checkAns()"> IMAGE 2 <br><br><br> </label>
    <label>  <input type="radio" name="q0" value="a3" id="a3" class="radio" onchange="checkAns()"> IMAGE 3 <br><br><br> </label>
    <label>  <input type="radio" name="q0" value="a4" id="a4" class="radio" onchange="checkAns()"> IMAGE 4 <br><br><br> </label>
    <label>  <input type="radio" name="q0" value="a5" id="a5" class="radio" onchange="checkAns()"> IMAGE 5 <br><br><br> </label>
    <button id="btn" disabled>Button</button> 
</div>

<script>
    var a1 = document.getElementById('a1');
    var a2 = document.getElementById('a2');
    var a3 = document.getElementById('a3');
    var a4 = document.getElementById('a4');
    var a5 = document.getElementById('a5');

    function checkAns(){
        console.log(a1.checked, a2, a3, a4, a5);
        if (a1.checked || a2.checked || a3.checked || a4.checked || a5.checked) {
            document.getElementById("btn").disabled = false; 
        }
    }
</script>
  

Это может помочь.