How can I Check and Uncheck multiple radio buttons on button click via jquery?

Question

As per the image I want to check and uncheck radio button as all present and all absent. I have written some code but it works only once.

$(document).on('click', '#btn_all_absent', function(e){

                $("input:radio[class^=present]").each(function(i) {
                    $(this).attr('checked',false);
                });

                $("input:radio[class^=absent]").each(function(i) {
                    $(this).attr('checked',true);
                });
            }); 


            $(document).on('click', '#btn_all_present', function(e){
                
                $("input:radio[class^=absent]").each(function(i) {
                    $(this).attr('checked',false);
                });

                $("input:radio[class^=present]").each(function(i) {
                    $(this).attr('checked',true);
                });
            });

Please suggest me where I am wrong.

Can you please elaborate what are you trying to do..? for me this piece of code is working perfectly fine — Om Nigam, Feb 19 '23 at 09:56

score 0 · Answer 1 · answered Feb 19 '23 at 10:00

Your code is working well for this.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
  </head>
  <body>
    <div>
      <button id="btn_all_present"></button>
      <input type="radio" class="present" />
      <input type="radio" class="present" />
      <input type="radio" class="present" />
      <input type="radio" class="present" />
      <input type="radio" class="present" />
      <input type="radio" class="present" />
      <input type="radio" class="present" />
    </div>
    <br />
    <button id="btn_all_absent"></button>
    <div>
      ABSENT
      <input type="radio" class="absent" />
      <input type="radio" class="absent" />
      <input type="radio" class="absent" />
      <input type="radio" class="absent" />
      <input type="radio" class="absent" />
      <input type="radio" class="absent" />
      <input type="radio" class="absent" />
    </div>
  </body>
  <script>
    $(document).on("click", "#btn_all_absent", function (e) {
      $("input:radio[class^=present]").each(function (i) {
        $(this).attr("checked", false);
      });

      $("input:radio[class^=absent]").each(function (i) {
        $(this).attr("checked", true);
      });
    });

    $(document).on("click", "#btn_all_present", function (e) {
      $("input:radio[class^=absent]").each(function (i) {
        $(this).attr("checked", false);
      });

      $("input:radio[class^=present]").each(function (i) {
        $(this).attr("checked", true);
      });
    });
  </script>
</html>

When i am using each function its working only once. – Khushal Feb 19 '23 at 10:40 — Khushal, Feb 19 '23 at 10:40
can you provide your html code aswell? – Om Nigam Feb 19 '23 at 10:55 — Om Nigam, Feb 19 '23 at 10:55

score 0 · Answer 2 · answered Feb 19 '23 at 10:40

It worked for me like this.

$(document).on('click', '#btn_all_absent', function(e){
                $("input:radio[class^=present]").prop('checked', false);
                $("input:radio[class^=absent]").prop('checked', true);
            });

            $(document).on('click', '#btn_all_present', function(e){
                $("input:radio[class^=absent]").prop('checked', false);
                $("input:radio[class^=present]").prop('checked', true);
            });

zer00ne · Answer 3 · 2023-08-26T17:58:19.260

Radio Button Groups

It's hard to say what exactly your problem could be since HTML wasn't posted ATM. As long as each row has a pair of radio buttons that share a unique name value, only one of each pair must be checked because the default behavior of a radio button group is that only one can be checked at a time (See Example A). Use .prop() method instead of .attr(), see this post (See Example B).

Details are commented in examples

Example A

// .toggle button calls yesNo(e) when clicked
document.querySelector(".toggle").onclick = yesNo;

function yesNo(e) {
  // Collect all <input> into a NodeList
  const rad = document.querySelectorAll("input");
  // If the first radio button is checked, return 1 else return 0
  let chk = rad[0].checked === true ? 1 : 0;
  /** 
   * Check the first or second radio -- depending on "chk"
   * When one radio is checked, the other radio will be unchecked
   */
  rad[chk].checked = true;
}

<fieldset>
  <legend>Radio Button Group A </legend>
  <label>Yes <input name="A" type="radio"></label><br>
  <label>No&nbsp;&nbsp;<input name="A" type="radio"></label><br>
  <button class="toggle">Switch</button>
</fieldset>

Example B

/**
 * Bind all buttons to "click" event.
 * Call event handler checkAll(e) when "click" event is triggered.
 */
$(":button").on("click", checkAll);

// Event handler passes (e)vent Object by default
function checkAll(e) {
  /**
   * If the user clicked a button with class .present...
   * ...check all .present
   */
  if ($(this).is(".present")) {
    $(".present").prop("checked", true);
    /**
     * If the user clicked a button with class .absent...
     * ...check all .absent
     */
  } else if ($(this).is(".absent")) {
    $(".absent").prop("checked", true);
    /**
     * Otherwise end the function
     */
  } else {
    return false;
  }
}

/**
 * OPTION - Not a requirement
 * This function will programmatically assign each row 
 * a unique ID for the first column and name for each
 * radio button pair so that each row has a radio button
 * group.
 */
/*
function createRBG(table) {
  const tB = table.tBodies[0];
  Array.from(tB.rows).forEach((row, idx) => {
    row.cells[0].textContent = idx + 1;
    row.querySelectorAll("input").forEach(radio => radio.name = idx + 1);
  });
}
*/

:root {
  font: 2ch/1.15 "Segoe UI"
}

td {
  text-align: center;
}

thead tr:first-child th:first-child,
tr td:nth-child(2) {
  text-align: left;
}

[type="button"] {
  font: inherit;
  cursor: pointer
}

<form id="rolecall">
  <table>
    <thead>
      <tr>
        <th colspan="2">Student Rolecall</th>
        <th><input class="present" type="button" value="All Present"></th>
        <th><input class="absent" type="button" value="All Absent"></th>
      </tr>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Present</th>
        <th>Absent</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Carling Gunthorp</td>
        <td><input class="present" name="1" type="radio"></td>
        <td><input class="absent" name="1" type="radio"></td>
      </tr>
      <tr>
        <td>2</td>
        <td>Cad Sultana</td>
        <td><input class="present" name="2" type="radio"></td>
        <td><input class="absent" name="2" type="radio"></td>
      </tr>
      <tr>
        <td>3</td>
        <td>Kurtis Perigeaux</td>
        <td><input class="present" name="3" type="radio"></td>
        <td><input class="absent" name="3" type="radio"></td>
      </tr>
      <tr>
        <td>4</td>
        <td>Moises Pherps
        </td>
        <td><input class="present" name="4" type="radio"></td>
        <td><input class="absent" name="4" type="radio"></td>
      </tr>
      <tr>
        <td>5</td>
        <td>Frederic Carlozzi</td>
        <td><input class="present" name="5" type="radio"></td>
        <td><input class="absent" name="5" type="radio"></td>
      </tr>
    </tbody>
  </table>
</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

How can I Check and Uncheck multiple radio buttons on button click via jquery?

3 Answers3

Radio Button Groups

Example A

Example B