Javascript：当使用同一类检查其他 15 个单选按钮时，如何启用单选按钮？

Question

I am trying to enable a radio button after 15 other radio buttons (code snippet below) are clicked. How can I do this in pure JS (no jQuery)?

<div class="assessment-question">
  <span><em>{% trans "I do more than what's expected of me" %}</em></span>
  <ul class="assessment-answer-list">
    <li>
      <input type="radio" name="question11" value="0-0" class="assess_answers" required> {% trans 'Never' %}
    </li>
    <li>
      <input type="radio" name="question11" value="1-0" class="assess_answers"> {% trans 'Rarely' %}
    </li>
    <li>
      <input type="radio" name="question11" value="2-1" class="assess_answers"> {% trans 'Sometimes' %}
    </li>
    <li>
      <input type="radio" name="question11" value="3-1" class="assess_answers"> {% trans 'Often' %}
    </li>
    <li>
      <input type="radio" name="question11" value="4-1" class="assess_answers"> {% trans 'Always' %}
    </li>
  </ul>
</div>
<div class="assessment-question">
  <span><em>{% trans 'I feel comfortable around people' %}</em></span>
  <ul class="assessment-answer-list">
    <li>
      <input type="radio" name="question12" value="0-0" class="assess_answers" required> {% trans 'Never' %}
    </li>
    <li>
      <input type="radio" name="question12" value="1-0" class="assess_answers"> {% trans 'Rarely' %}
    </li>
    <li>
      <input type="radio" name="question12" value="2-1" class="assess_answers"> {% trans 'Sometimes' %}
    </li>
    <li>
      <input type="radio" name="question12" value="3-1" class="assess_answers"> {% trans 'Often' %}
    </li>
    <li>
      <input type="radio" name="question12" value="4-1" class="assess_answers"> {% trans 'Always' %}
    </li>
  </ul>
</div>

I currently have a "next" radio button that is disabled and I want to enable it after all 15 of the above (only a few shown) are checked. They all have the same class name so I can identify them under the same umbrella.

I have tried a couple of solutions that have not worked. The solutions I have tried all seem to need to have a function activated when each radio button is checked.

Can I use addEventListener or something?

Answer 1

just use the document.getElementsByClassName to get them all, keep track of the values (AKA, check if all of the values are true with a function), add a few eventlisteners for when it is checked, then once its clicked etc, then check them all to see if the value of all is true. For example:

var checkedBoxes = Array.apply(null,document.getElementsByClassName("myClassName"));
checkedBoxes.forEach(x => {
    x.addEventListener("click", onActive);
    x.addEventListener("focus", onActive);
    x.addEventListener("blur", onActive);
    //other event listeeners
});
function checkAll() {
     return !checkedBoxes.find(x => !x.checked) //can't find any radio button whose value is false, which means they are all true, which means they are all checked
}
function onActive(e) {
    if(checkAll()) {
        //activate next button
    }
}

Answer 2

Look at this real snippet to see how to do

 const myForm = document.getElementById('my-form') , gRnames = [...new Set([...myForm.elements].filter(n=>(n.type==='radio')).map(n=>n.name))] ; function SetButtonNextOnOff() { let answers = gRnames.reduce((tot,el)=>tot+=myForm[el].value===''?0:1,0) myForm.bt_next.disabled = (answers!=gRnames.length) } SetButtonNextOnOff() ; myForm.oninput = SetButtonNextOnOff ; myForm.onsubmit =e=> { e.preventDefault() console.clear() Array.from(new FormData(myForm),e=>console.log(e[0],'->',e[1])) myForm.reset() } myForm.onreset =_=>{ myForm.bt_next.disabled = true } ;

 label { display:block; } fieldset { margin:1em; width:23em; } .as-console-wrapper { max-height: 100% !important; width: 30% !important; top: 0; left: 70% !important; }

 <form action="xxx" id="my-form" > <fieldset> <legend>I do more than what's expected of me </legend> <label><input type="radio" name="question11" value="0-0"> Never </label> <label><input type="radio" name="question11" value="1-0"> Rarely </label> <label><input type="radio" name="question11" value="2-1"> Sometimes </label> <label><input type="radio" name="question11" value="3-1"> Often </label> <label><input type="radio" name="question11" value="4-1"> Always </label> </fieldset> <fieldset> <legend>I feel comfortable around people</legend> <label><input type="radio" name="question12" value="0-0"> Never </label> <label><input type="radio" name="question12" value="1-0"> Rarely </label> <label><input type="radio" name="question12" value="2-1"> Sometimes </label> <label><input type="radio" name="question12" value="3-1"> Often </label> <label><input type="radio" name="question12" value="4-1"> Always </label> </fieldset> <button name="bt_next" type="submit">Next</button> <button type="reset">reset</button> </form>

Answer 3

If you want all 15 radio buttons to be checked, their name property should be different than one another

Each radio element should have click/change event and function defined for the event to identify whether it's clicked or not

Each time the radio button clicked, check whether it's enabled / disabled and update counter for the required no of radio buttons clicked accordingly.

Compare it with the no of radio buttons with the same class(getElementsByClassName())

if count is same means all required radio buttons are enabled, you can manually enable the next radio button in the event function