选择 FORM_TAG 中的所有复选框

发布于 2024-09-05 15:21:54 字数 230 浏览 4 评论 0原文

在 form_tag 中，有一个包含 10 到 15 个复选框的列表：

<%= check_box_tag 'vehicles[]', car.id %>

如何通过 RJS 选择所有（在每个单独的复选框中打勾）复选框？谢谢

编辑：抱歉我没有说清楚我的问题。我的意思是问如何在同一页面中添加“选择/取消全选”链接来切换复选框。

原文

In a form_tag, there is a list of 10 to 15 checkboxes:

<%= check_box_tag 'vehicles[]', car.id %>

How can I select-all (put a tick in every single) checkboxes by RJS? Thanks

EDIT: Sorry I didn't make my question clear. What I meant to ask is how to add a "Select/Un-select All" link in the same page to toggle the checkboxes.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

浮生面具三千个 2024-09-12 15:21:54

试试这个：

<%= check_box_tag 'vehicles[]', car.id, {:checked => "checked"} %>

编辑

您可以使用 Tim Down 的解决方案作为普通的 javascript 解决方案。如果你使用 jQuery，你可以尝试这样的事情：

<script>
  $(document).ready(function(){

    // select all
    $(".checkboxes a[rel=all]").click(function(){
      $(this).siblings("input:checkbox:not(:checked)").attr({checked: true});
    });

    // select none
    $(".checkboxes a[rel=none]").click(function(){
      $(this).siblings("input:checkbox:checked)").removeAttr("checked");
    });

  });
</script>

<div class="checkboxes">

  <input type="checkbox" value="foo" /> Foo
  <input type="checkbox" value="bar" /> Bar
  <input type="checkbox" value="baz" /> Baz

  select 
  <a href="#" rel="all">all</a> | 
  <a href="#" rel="none">none</a>

</div>

Try this:

<%= check_box_tag 'vehicles[]', car.id, {:checked => "checked"} %>

Edit

You can use Tim Down's solution for vanilla javascript solution. If you are using jQuery, you can try something like this:

<script>
  $(document).ready(function(){

    // select all
    $(".checkboxes a[rel=all]").click(function(){
      $(this).siblings("input:checkbox:not(:checked)").attr({checked: true});
    });

    // select none
    $(".checkboxes a[rel=none]").click(function(){
      $(this).siblings("input:checkbox:checked)").removeAttr("checked");
    });

  });
</script>

<div class="checkboxes">

  <input type="checkbox" value="foo" /> Foo
  <input type="checkbox" value="bar" /> Bar
  <input type="checkbox" value="baz" /> Baz

  select 
  <a href="#" rel="all">all</a> | 
  <a href="#" rel="none">none</a>

</div>

回复收藏 0 原文

铜锣湾横着走 2024-09-12 15:21:54

以下函数将切换特定 DOM 元素（例如

元素）内所有复选框的选中状态：

function toggleAllCheckBoxes(el) {
    var inputs = el.getElementsByTagName("input");
    var input, checked = false, i, len;

    // Check whether all the checkboxes are all already checked.
    // If so, we uncheck all of them. Otherwise, we check all of them.
    for (i = 0, len = inputs.length; i < len; ++i) {
         input = inputs[i];
         if (input.type == "checkbox" && !input.checked) {
             checked = true;
             break;
         }
    }

    // Now check or uncheck all of the checkboxes
    for (i = 0, len = inputs.length; i < len; ++i) {
        input = inputs[i];
        if (input.type == "checkbox") {
            input.checked = checked;
        }
    }
}

var form = document.getElementById("your_form_id");
toggleAllCheckBoxes(form);

The following function will toggle the checkedness of all checkboxes inside a particular DOM element (for example, a <form> element):

function toggleAllCheckBoxes(el) {
    var inputs = el.getElementsByTagName("input");
    var input, checked = false, i, len;

    // Check whether all the checkboxes are all already checked.
    // If so, we uncheck all of them. Otherwise, we check all of them.
    for (i = 0, len = inputs.length; i < len; ++i) {
         input = inputs[i];
         if (input.type == "checkbox" && !input.checked) {
             checked = true;
             break;
         }
    }

    // Now check or uncheck all of the checkboxes
    for (i = 0, len = inputs.length; i < len; ++i) {
        input = inputs[i];
        if (input.type == "checkbox") {
            input.checked = checked;
        }
    }
}

var form = document.getElementById("your_form_id");
toggleAllCheckBoxes(form);

回复收藏 0 原文

~没有更多了~