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
jQuery Show or Hide text on button click Example to take user input and display on screen using JavaScript How to scroll page to particular Div on click using jQuery? How to check if an element or HTML tag exists using JavaScript? jQuery example of scroll to top How to join string with number in JavaScript?