ruby on rails - tag - Seleccione todas las casillas de verificación
rails checkbox tag (2)
En mi aplicación Rails he creado un conjunto de casillas de verificación de la siguiente manera:
<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>
Me gustaría saber cómo crear un botón que sería "Seleccionar todo".
Si usa Prototype JS, puede que esta publicación de blog le resulte útil. Proporciona una forma bastante concisa para realizar un seleccionar todo.
http://www.ryboe.com/2008/07/10/select-all-checkboxes-with-prototype-js.html
En su opinión, podría usar el siguiente fragmento para crear un enlace "Seleccionar todo":
<%= link_to_function("Select All","checkboxes.each(function(e){ e.checked = 1 })") %>
Además, necesitaría el siguiente código JavaScript en algún lugar de la misma página (o tal vez incluso abstraído en el archivo 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'');
Aquí está la fuente completa de un ejemplo de trabajo, si esto no funciona, es posible que necesite verificar que sus bibliotecas JS se estén cargando correctamente.
<!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>
Usando jQuery;
<script type="text/javascript">
function selectAll(){
$("input:checkbox").each(function(){
$(this).attr(''checked'', true);
});
return false;
}
</script>
Botón HTML:
<a href="#" onclick="selectAll()">Select All</a>