Question 11151 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

On click button Check and Uncheck multiple radio buttons via Jquery

As per the below image I want to check and uncheck radio button as all present and all absent.

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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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);
            });

  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search