jQuery dynamically mark all checkboxes checked

Question

I have the following HTML structure -

<div class="first_checkbox">
<input type="checkbox" name="checkbox"  class="all-checkbox" value="">
</div>

<table>
    <tr>
        <td>
            <input type="checkbox" name="checkbox-32" id="checkbox-32" value="" style="opacity: 0;" />
        </td>
        <td class="h_pincode">380059</td>
        <td class="b_add2">Nr. Swatik Cross Road, Navrangpura</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="checkbox-34" id="checkbox-34" value="" style="opacity: 0;" />
        </td>
        <td class="h_pincode">380015</td>
    </tr>
</table>

The functionality, I want to achieve is, when I click on the first radio box, all the subsequent checkbox in s be checked.

The JS to do that is as follows -

$(function(){
  $(".all-checkbox").on("click", function(){
  $('input[type=checkbox]').each(function(ind, val){
      $(this).prop('checked', 'checked');
      console.log(this.name + ' ' + this.value + ' ' + this.checked);
  });
 });
});

I am getting the console logs correctly, only difference being, the radio boxes does not get checked.

The fiddle is located here - http://jsfiddle.net/dAJM8/

Answer 1

check jsFiddle

JQuery

 $("#checkbox-all").click(function () {
     $('input:checkbox').not(this).prop('checked', this.checked);
 });