How to check all radio boxes in a page with js code?-CodePudding

This is the codes for radio box.

<div class="question-answer">
    <label style="margin: 10px;">
        <span class="kt-font-bolder">1</span>
        <br>
        <input name="2" type="radio" label="1" value="1">
    </label>

    <label style="margin: 10px;">
        <span class="kt-font-bolder">2</span>
        <br>
        <input name="2" type="radio" label="2" value="2">
    </label>

    <label style="margin: 10px;">
        <span class="kt-font-bolder">3</span>
        <br>
        <input name="2" type="radio" label="3" value="3">
    </label>

    <label style="margin: 10px;">
        <span class="kt-font-bolder">4</span>
        <br>
        <input name="2" type="radio" label="4" value="4">
    </label>

    <label style="margin: 10px;">
        <span class="kt-font-bolder">5</span>
        <br>
        <input name="2" type="radio" label="5" value="5">
    </label>

    <br>

    <span style="color: rgb(128, 0, 0);"></span>
</div>

There are almost 20 question in a page with same code. How can I check all 3 in radiobox with js code? Can anyone help me, please?

CodePudding user response：

You could try document.querySelectorAll to find the elements you want by using a css selector like .question-answer input[type="radio"][value="3"]. Then you can iterate over that list and set the checked property to true.

const inputElementsWith3 = document.querySelectorAll('.question-answer input[type="radio"][value="3"]');
inputElementsWith3.forEach(function(radio) { radio.checked = true; });

CodePudding user response：

I believe the checkbox is a more suitable element here and You can use document.querySelectorAll.

Here's the working example with the difference between checkbox and radio Selecting all checkboxes and radio.

const radioElements = document.querySelectorAll("input[type=radio]")

const checkboxElements = document.querySelectorAll("input[type=checkbox]")

radioElements.forEach(radio => radio.checked = true)
checkboxElements.forEach(checkbox => checkbox.checked = true)

<div class="question-answer">
  <label style="margin: 10px;">
        <span class="kt-font-bolder">1</span>
        <input name="2" type="radio" label="1" value="1">
    </label>
  <br>
  <label style="margin: 10px;">
        <span class="kt-font-bolder">2</span>
        <input name="2" type="radio" label="2" value="2">
    </label>
  <br>
  <label style="margin: 10px;">
        <span class="kt-font-bolder">3</span>
     
        <input name="2" type="radio" label="3" value="3">
    </label>
  <br>
  <label style="margin: 10px;">
        <span class="kt-font-bolder">4</span>
        <input name="2" type="radio" label="4" value="4">
    </label>
  <br>
  <label style="margin: 10px;">
        <span class="kt-font-bolder">5</span>
        <input name="2" type="radio" label="5" value="5">
    </label>
  <br>
  <span style="color: rgb(128, 0, 0);"></span>
</div>


<div class="question-answer">
  <label style="margin: 10px;">
        <span class="kt-font-bolder">1</span>
        <input name="2" type="checkbox" label="1" value="1">
    </label>
  <br>
  <label style="margin: 10px;">
        <span class="kt-font-bolder">2</span>
        <input name="2" type="checkbox" label="2" value="2">
    </label>
  <br>
  <label style="margin: 10px;">
        <span class="kt-font-bolder">3</span>
        <input name="2" type="checkbox" label="3" value="3">
    </label>
  <br>
  <label style="margin: 10px;">
        <span class="kt-font-bolder">4</span>
        <input name="2" type="checkbox" label="4" value="4">
    </label>
  <br>
  <label style="margin: 10px;">
        <span class="kt-font-bolder">5</span>
        <input name="2" type="checkbox" label="5" value="5">
    </label>
  <br><span style="color: rgb(128, 0, 0);"></span>
</div>