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
How to current URL, HOST and URL attributes using JavaScript or jQuery? How to show hide option list items using jQuery? How to scroll page to particular Div on click using jQuery? ES6 method of declaration multiple variables in one line How to build simple tabs with jQuery? JavaScript convert string variable in boolean using Regex