麻煩設置「選中」屬性複選框jquery

Question

我想設置一個div內的所有複選框，當選擇一個特定的單選按鈕時選中。這是我嘗試過的，但沒有奏效。我嘗試了prop()和attr()。

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

這裏是我的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

如果#radio1是在頁面加載檢查您只能檢查。如果您希望在用戶選中/取消選中#radio1時檢查，請使用on()。在下面的工作示例

通知，我們結合的onchange都無線電與one名稱。這將保留該複選框的選中/取消選中，當用戶檢查#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

你應該試試這個。

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