麻烦设置复选框复选框“选中”属性

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>

Answer 1

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> 

Answer 2

You should try this.

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