Checkbox Change: update html with current checked elements

Question

I have a series of input[checkbox] elements and when a checkbox is checked I grab it's parent's html.

In the snippet I'm going through each element individually (like if #apples is checked I set it's checked attribute to true and grab it's parent's html)

However I don't like going through and checking each element individually as seen here...

if ( $("#apples").is(":checked") ) {
  $("#apples").attr("checked", true);
} else {
  $("#apples").attr("checked", false);
}
if ( $("#oranges").is(":checked") ) {
  $("#oranges").attr("checked", true);
} else {
  $("#oranges").attr("checked", false);
}
if ( $("#grapes").is(":checked") ) {
  $("#grapes").attr("checked", true);
} else {
  $("#grapes").attr("checked", false);
}

Does anyone know if there's an easier way to do this?

 function checkCheckedHTML() { if ( $(".check").is(":checked") || !$(".check").is(":checked") ) { if ( $("#apples").is(":checked") ) { $("#apples").attr("checked", true); } else { $("#apples").attr("checked", false); } if ( $("#oranges").is(":checked") ) { $("#oranges").attr("checked", true); } else { $("#oranges").attr("checked", false); } if ( $("#grapes").is(":checked") ) { $("#grapes").attr("checked", true); } else { $("#grapes").attr("checked", false); } $(".wrapper").val( $(".container").html() ); console.log("Checked: update html with current checked elements"); } } $(".check").on("click change", function() { checkCheckedHTML(); }); 

 textarea { width: 600px; height: 150px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <input type="checkbox" class="check" id="apples"> <label for="apples">apples</label> <input type="checkbox" class="check" id="oranges"> <label for="oranges">oranges</label> <input type="checkbox" class="check" id="grapes"> <label for="grapes">grapes</label> </div> <textarea class="wrapper"></textarea> 

Answer 1

You just need to update the checked attribute of element which has been changed, you can access it's object by using this inside the change event callback

 $(".check").on("change", function() { $(this).attr('checked',this.checked); // updating checked attribute of change event occurred element, this.checked returns current state $(".wrapper").val( $(".container").html()); // updating the value of textarea }); 

 textarea { width: 600px; height: 150px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <input type="checkbox" class="check" id="apples"> <label for="apples">apples</label> <input type="checkbox" class="check" id="oranges"> <label for="oranges">oranges</label> <input type="checkbox" class="check" id="grapes"> <label for="grapes">grapes</label> </div> <textarea class="wrapper"></textarea> 

Answer 2

Try this:

$(".check").on("click change", function() {
   if ( $(".check").is(":checked")){
       $(this).attr("checked",true);  
   } else {
            $(this).attr("checked",false);  
   }
});

http://jsfiddle.net/y37L78pn/

Answer 3

I suppose you could do this...if I understood you correctly:-

$(".check").on("click change", function() {

  if ( $(this).is(":checked") ) $(this).attr("checked", true);
  else $(this).attr("checked", false);

  $(".wrapper").val( $(".container").html() );
    console.log("Checked: update html with current checked elements");
});

Check out the fiddle for this: https://jsfiddle.net/kfrjzwmh/