## Check and Uncheck All

JavaScript:

Here we take advantage of an attribute value selector (`[name="how"]`) the ability to retrieve and set property values. Note too that we iterate through each of the checkboxes.

To read more about attributes vs properties in jQuery, see: .prop() and .attr()

Example 9.4 - Check/Uncheck all - Example 9.4 | Example 9.4 JSFiddle

- Markup
- Script
- Screenshot

     <form action="https://cscie12.dce.harvard.edu/echo" method="get">
       <h3>How did you hear about us?   </h3>
       <p>[
         <a href="#" id="checkall">check all     </a>] [
         <a href="#" id="uncheckall">uncheck all     </a>] [
         <a href="#" id="togglecheckboxes">toggle     </a>]
       </p>
       <ul style="list-style: none;">
         <li>
           <input type="checkbox" name="how" value="radio"/>
    Radio
         </li>
         <li>
           <input type="checkbox" name="how" value="newspaper"/>
    Newspaper
         </li>
         <li>
           <input type="checkbox" name="how" value="magazine"/>
    Magazine
         </li>
         <li>
           <input type="checkbox" name="how" value="online"/>
    Online
         </li>
         <li>
           <input type="checkbox" name="how" value="friend"/>
    Friend
         </li>   </ul>
       <input type="submit"/>

     </form>

In `script` element within `head` element (`<script>`):

    $(document).ready(function() {
      console.log($('#input[name="how"]'));
      $('#checkall').click(function() {
        $('input[name="how"]').prop('checked',true);
        console.log('check all!');
      });
      $('#uncheckall').click(function() {
        $('input[name="how"]').prop('checked',false);
        console.log('uncheck all!');
      });
      $('#togglecheckboxes').click(function() {
        $('input[name=how]').each(function (i) {
          if ($(this).is(':checked')) {
            $(this).prop('checked',false);
          } else {
            $(this).prop('checked',true);
          }
        });
      });
     });