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：

时，这会保留对复选框的检查/取消选中

＆＃13;

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);
    }
});

＆＃13;

<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>

＆＃13;

Answer 2

你应该试试这个。

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

将“已检查”属性设置为复选框jquery时出现问题

2 个答案: