0

我有一个活动复选框和一个突出显示复选框。

在此处输入图像描述

我希望活动复选框在选中活动时自动选中突出显示复选框。我对是否探索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>
4

2 回答 2

3

检查这个小提琴

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

});​

也可以使用

$(this).next().prop('checked' , $(this).is(':checked'));
于 2012-09-26T21:28:32.880 回答
1

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 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>
于 2012-09-26T21:41:43.233 回答