Golang React JS Technology Blog

How to set checkbox and radio option checked on load with jQuery?

You can use prop function to set "checked" property: 
<script>
   $(document).ready(function()
   {
    $('#bar1').prop('checked', true);
    $('#radiobar1').prop('checked', true);  
   });
</script>
Working Example 
<!DOCTYPE html>
<html lang="en">
   <head>
      <style>	
         #hiddenElement {
         display: none;
         }
         #visibleElement {
         display: block;
         }
      </style>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
      <script>
         $(document).ready(function()
         {
          $('#bar1').prop('checked', true);
          $('#radiobar1').prop('checked', true);  
         });
      </script>
   </head>
   <body>
      <div>
         <input type="checkbox" name="foo1" value="bar1" id="bar1" />
         <input type="checkbox" name="foo1" value="bar2" id="bar2" />
         <input type="checkbox" name="foo1" value="bar3" id="bar3" />
      </div>
      <div>
         <input type="radio" name="foo2" value="bar1" id="radiobar1" />
         <input type="radio" name="foo2" value="bar2" id="radiobar2" />
         <input type="radio" name="foo2" value="bar3" id="radiobar3" />
      </div>
   </body>
</html>
Most Helpful This Week
JavaScript simple alert on Click Example to take user input and display on screen using JavaScript How to declare and print value of variable in JavaScript? How to declare multiple variables in one statement in Javascript? Highlight and get the details of table row on click using JavaScript How to scroll page to 1000px from top on page load using jQuery?