trouble setting "checked" property to checkbox jquery

Question

I want to set all the checkbox inside a div as checked when a particular radio button is selected. this is what i have tried but it didn't work. I tried both prop() and attr().

if($('#radio1').is(":checked",true)){       
  $('.checkbox-div').find('input[type=checkbox]').attr('checked','true');
}

Here is my fiddle

<input type = "radio" id="radio1" name = "one">
<input type = "radio" id="radio2" name = "one">
<table class="table funds-table">
    <thead class="table-head">
       <tr>
         <th id="equity-text">EQUITY</th>
         <th id="eq-show-less">SHOW LESS</th>

       </tr>
    </thead>

   <tbody id = "equity-body">
      <tr>

       <td class = "fund-name">

       <div class = "col-xs-1 padding-lr-zero checkbox-div"><input type="checkbox" id = "checkbox1">
          <label for="checkbox1"><span class="checkbox"><img src="icons/check_dis.png"></span></label></div>

       <div class = "col-xs-11 fund-name-div"><span class = "span-fund-name">HDFC DYNAMIC FUND HDFC DYNAMIC FUND HDFC DYNAMIC</span><p class = "currently-inv"> Currently invested <span class = "curr-span-amt">Rs. 50,000</span></p></div>

        </td>

        <td class = "fund-amount"><p class = "fund-amount-inner">Rs. 50,00,000</p></td>
        </tr>

            <tr>

       <td class = "fund-name">

          <div class = "col-xs-1 padding-lr-zero checkbox-div"><input type="checkbox" id = "checkbox2">
                  <label for="checkbox2"><span class="checkbox"><img src="icons/check_dis.png"></span></label></div>

          <div class = "col-xs-11 fund-name-div"><span class = "span-fund-name">HDFC DYNAMIC FUND HDFC DYNAMIC FUND HDFC DYNAMIC</span></div>

          </td>

          <td class = "fund-amount"><p class = "fund-amount-inner">Rs. 50,00,000</p></td>
        </tr>


        </tbody>

`.prop('checked',true);` not `.attr('checked','true');` (no quotes around the boolean) — j08691, Feb 28 '17 at 18:16
Possible duplicate of [Setting "checked" for a checkbox with jQuery?](http://stackoverflow.com/questions/426258/setting-checked-for-a-checkbox-with-jquery) — Heretic Monkey, Feb 28 '17 at 18:18

score 1 · Accepted Answer · answered Feb 28 '17 at 18:18

You are only checking if #radio1 is checked on page load. If you want it to check whenever the user checks / unchecks #radio1, use on().

Notice in the working example below, we bind to onchange of both radios with the name of one. This preserves the checking / unchecking of the checkboxes when the user checks #radio2:

let $checkboxes = $('.checkbox-div').find('input[type=checkbox]');

$('input[name="one"]').on('change', function() {
    if( $(this).is(':checked') && $(this).attr('id') == 'radio1' )
    {
        $checkboxes.prop('checked', true);
    }
    else
    {
        $checkboxes.prop('checked', false);
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type = "radio" id="radio1" name = "one">
<input type = "radio" id="radio2" name = "one">
<table class="table funds-table">
    <thead class="table-head">
       <tr>
         <th id="equity-text">EQUITY</th>
         <th id="eq-show-less">SHOW LESS</th>
    
       </tr>
    </thead>
    
    <tbody id = "equity-body">
      <tr>
    
       <td class = "fund-name">
    
       <div class = "col-xs-1 padding-lr-zero checkbox-div"><input type="checkbox" id = "checkbox1">
          <label for="checkbox1"><span class="checkbox"><img src="icons/check_dis.png"></span></label></div>
    
       <div class = "col-xs-11 fund-name-div"><span class = "span-fund-name">HDFC DYNAMIC FUND HDFC DYNAMIC FUND HDFC DYNAMIC</span><p class = "currently-inv"> Currently invested <span class = "curr-span-amt">Rs. 50,000</span></p></div>
    
        </td>
    
        <td class = "fund-amount"><p class = "fund-amount-inner">Rs. 50,00,000</p></td>
        </tr>
    
            <tr>
    
       <td class = "fund-name">
    
          <div class = "col-xs-1 padding-lr-zero checkbox-div"><input type="checkbox" id = "checkbox2">
                  <label for="checkbox2"><span class="checkbox"><img src="icons/check_dis.png"></span></label></div>
    
          <div class = "col-xs-11 fund-name-div"><span class = "span-fund-name">HDFC DYNAMIC FUND HDFC DYNAMIC FUND HDFC DYNAMIC</span></div>
    
          </td>
    
          <td class = "fund-amount"><p class = "fund-amount-inner">Rs. 50,00,000</p></td>
        </tr>
    
    
        </tbody>
</table>

score -1 · Answer 2 · answered Feb 28 '17 at 18:19

-1

You should try this.

$('#radio1').on('click',function(){
   $('.checkbox-div').find('input[type="checkbox"]').attr('checked',$(this).prop('checked'));
});

answered Feb 28 '17 at 18:19

Sudhanshu Jain

494
3
11

This does not take into consideration if the user checks `#radio2`. – BenM Feb 28 '17 at 18:24

trouble setting "checked" property to checkbox jquery

2 Answers2