Cochez toutes les cases

Dans mon application Rails j'ai créé un ensemble de cases à cocher comme suit:Cochez toutes les cases

<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>

Je voudrais savoir comment créer un bouton qui « Sélectionner tout ».

Source

2009-05-20 alamodey

voir http: // stackoverflow.com/questions/386281/how-to-implement-select-all-check-box-in -html –

Si vous utilisez Prototype JS, vous trouverez peut-être ce blog utile. Il donne un moyen assez concis pour effectuer un tout sélectionner.

http://www.ryboe.com/2008/07/10/select-all-checkboxes-with-prototype-js.html

À votre avis, vous pouvez utiliser l'extrait suivant pour créer un lien « Sélectionner tout »:

<%= link_to_function("Select All","checkboxes.each(function(e){ e.checked = 1 })") %>

En outre, vous aurez besoin du code Javascript suivant quelque part sur la même page (ou peut-être même abstraire vers le fichier 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');

Voici la source complète d'un exemple de travail, si cela ne fonctionne pas yo Vous devrez peut-être vérifier que vos bibliothèques JS se chargent correctement.

<!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>

Source

2009-05-20 18:42:12 Scott

Cela ne fonctionne pas. L'avez-vous testé? – alamodey

Exemple de travail ajouté. Devrait être facile de remplacer le lien w/"link_to_function" dans Rails – Scott

Utilisation de jQuery;

<script type="text/javascript"> 
     function selectAll(){ 
     $("input:checkbox").each(function(){ 
      $(this).attr('checked', true); 
     }); 

     return false; 
     } 
</script>

bouton HTML:

<a href="#" onclick="selectAll()">Select All</a>

Source

2009-08-24 15:55:47 revgum

cela s'applique-t-il aux rails 3? Dans mon application, pour une raison quelconque, il ne vérifie que la première case de la liste. – Ramy

Le retour est au mauvais endroit. Il devrait être juste avant le dernier et pas à l'intérieur du "chaque boucle" – vfn

Je pense que vous pouvez utiliser la requête comme celle

<script> 
$('#check_all').on("click", function(){ 
    var check = $('input[type="checkbox"]'); 
    check.prop("checked", !check.prop("checked")); 
}); 
</script>

et le code html sera quelque chose comme

<%= button_tag 'select/unselect all', id: 'check_all', class:'b' %>

Source

2018-02-01 12:50:44

Cochez toutes les cases

Répondre

Questions connexes