Question

我有一个有效的复选框和一个高亮复选框。

enter image description here

我希望Active复选框在选中活动时自动选中突出显示复选框。我是否反对围绕是否要探索prop()或做一个添加属性的丑陋绑定。

我最终会寻找最干燥的推荐，当然任何代码片段都非常受欢迎!!!

有些恼人的因为每个复选框（虽然表格中彼此相邻的都是他们自己的表格，在变更时使用ajax提交。

    <td>
  <% form_for(:catalog_item, catalog_item.item, :url => set_admin_catalog_item_path(catalog_item), :html => {:class => 'ajax'}) do |f| %>
    <%= f.check_box :active %>
  <% end %>
</td>
<td>
  <% form_for(:catalog_item, catalog_item, :url => set_admin_catalog_item_path(catalog_item), :html => {:class => 'ajax'}) do |f| %>
  <%= f.check_box :highlight %>
  <% end %>
</td>

Answer 1

选中此FIDDLE

$(function() {
    $('.active').on('click', function(){
        $(this).next().attr('checked' , $(this).is(':checked'));
    });

});

也可以使用

$(this).next().prop('checked' , $(this).is(':checked'));

Answer 2

jsFiddle

给出HTML：

<强> HTML

<div id="ActHigh">
    <table>
        <thead>
            <tr>
                <th>
                    <p>
                        Active
                    </p>
                </th>
                <th>
                    <p>
                        Highlight
                    </p>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <input type="checkbox" name="act01" class="chk-active" />
                </td>
                <td>
                    <input type="checkbox" name="hig01" class="chk-highlight" />
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="act02" class="chk-active" />
                </td>
                <td>
                    <input type="checkbox" name="hig02" class="chk-highlight" />
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="act03" class="chk-active" />
                </td>
                <td>
                    <input type="checkbox" name="hig03" class="chk-highlight" />
                </td>
            </tr>
        </tbody>
    </table>
</div>

您可以使用jQuery：

<强> SCRIPT

<script type="text/javascript">
    $(function() {
        //  This will file through all "active" type checkboxes
        $("#ActHigh .chk-active").each(function(i){ //  Keep in mind, this refernce relys on active and highlight chkboxes being one right after the other in html
            $(this).change(function(e) {//  this tells us to do something on the current checkbox when it is checked, via mouse or keyboard
                //  this looks for the "highlight" checkbox with the same INDEX as the currently changed "active" checkbox
                $("#ActHigh .chk-highlight").filter(function(ii){ return ii == i; }).prop("checked", $(this).prop("checked"));  
            });
        });
    })
</script>

Jquery选中复选框1时，选中复选框2

2 个答案: