选择所有复选框
问题描述：
在我的Rails应用程序我创建了一组复选框如下：选择所有复选框
<div class="form_row">
<label for="features[]">Features:</label>
<% ['scenarios', 'news', 'role_profiles', 'private_messages', 'chatrooms', 'forums', 'polls'].each do |feature| %>
<br><%= check_box_tag 'features[]', feature, (@features || {}).include?(feature) %>
<%= feature.humanize %>
<% end %>
</div>
我想知道如何创建一个按钮，将“全选”。
答
如果您使用Prototype JS，您可能会发现此博客文章有帮助。它给出了一个相当简洁的方式来执行全选。
http://www.ryboe.com/2008/07/10/select-all-checkboxes-with-prototype-js.html
在你看来，你可以使用下面的代码片段创建一个“全选”链接：
<%= link_to_function("Select All","checkboxes.each(function(e){ e.checked = 1 })") %>
此外，你需要下面的JavaScript代码的地方在同一页上（或者甚至抽象出来的public/javascripts/application.js文件
var checkboxes = [];
checkboxes = $$('input').each(function(e){ if(e.type == 'checkbox') checkboxes.push(e) });
var form = $('options'); /* Replace 'options' with the ID of the FORM element */
checkboxes = form.getInputs('checkbox');
这里的工作示例的全部源代码，如果这也不行哟你可能需要检查以确保你的JS库加载正确。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://www.google.com/jsapi" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
var checkboxes;
google.load("prototype", "1.6");
google.setOnLoadCallback(function(){
checkboxes = [];
checkboxes = $$('input').each(function(e){ if(e.type == 'checkbox') checkboxes.push(e) });
var form = $('options'); /* Replace 'options' with the ID of the FORM element */
checkboxes = form.getInputs('checkbox');
});
</script>
</head>
<body>
<form id="options">
<fieldset><input type="text" value="test"></fieldset>
<fieldset><input type="checkbox" value=0> 0</fieldset>
<fieldset><input type="checkbox" value=1> 1</fieldset>
<fieldset><input type="checkbox" value=2> 2</fieldset>
<fieldset><input type="checkbox" value=3> 3</fieldset>
</form>
<a href="#" onclick="checkboxes.each(function(e){e.checked = 1})">Select All</a>
</body>
</html>
答
使用jQuery;
<script type="text/javascript">
function selectAll(){
$("input:checkbox").each(function(){
$(this).attr('checked', true);
});
return false;
}
</script>
HTML按钮：
<a href="#" onclick="selectAll()">Select All</a>
答
我认为你可以使用查询像
<script>
$('#check_all').on("click", function(){
var check = $('input[type="checkbox"]');
check.prop("checked", !check.prop("checked"));
});
</script>
和HTML会像
<%= button_tag 'select/unselect all', id: 'check_all', class:'b' %>
请参阅http：// stackoverflow.com/questions/386281/how-to-implement-select-all-check-box-in -html – 2009-05-20 14:16:36