にはform_tag
、10 ~ 15 個のチェックボックスのリストがあります。
<%= check_box_tag 'vehicles[]', car.id %>
RJS ですべてのチェックボックスを選択するにはどうすればよいですか (すべてのチェックボックスにチェックを入れます)。ありがとう
編集:申し訳ありませんが、質問を明確にしませんでした。私が尋ねたかったのは、同じページに「すべてを選択/選択解除」リンクを追加して、チェックボックスを切り替える方法です。
にはform_tag
、10 ~ 15 個のチェックボックスのリストがあります。
<%= check_box_tag 'vehicles[]', car.id %>
RJS ですべてのチェックボックスを選択するにはどうすればよいですか (すべてのチェックボックスにチェックを入れます)。ありがとう
編集:申し訳ありませんが、質問を明確にしませんでした。私が尋ねたかったのは、同じページに「すべてを選択/選択解除」リンクを追加して、チェックボックスを切り替える方法です。
これを試して:
<%= check_box_tag 'vehicles[]', car.id, {:checked => "checked"} %>
バニラ JavaScript ソリューションには、Tim Down のソリューションを使用できます。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>
<form>
次の関数は、特定の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);