2009-05-20 4 views
3

選択:私は「すべて選択」でしょうボタンを作成する方法を知りたい次のように私は、チェックボックスのセットを作成した私の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> 

を。

+0

のhttp参照のようなものになると思う://をstackoverflow.com/questions/386281/how-to-implement-select-all-check-box-in -html –

答えて

1

Prototype JSを使用している場合は、このブログの投稿が役立つかもしれません。すべてを選択するには、かなり簡潔な方法があります。

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

また、あなたが同じページ上のどこかに以下のJavaScriptコードを必要とするだろう:

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

はあなたのビューでは、リンクの「すべて選択」を作成する次のコードを使用することができますこれが動作しない場合(または多分、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> 
+0

これは動作しません。あなたはそれをテストしましたか? – alamodey

+0

実例が追加されました。レール – Scott

4

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

の "link_to_function"でリンクを置き換えるのは簡単でしょうか?これはレール3に当てはまりますか?私のアプリでは、何らかの理由でそれがリストの最初のボックスをチェックしているだけです。 – Ramy

+0

返品が間違っています。最後の}の直前でなければならず、 "各ループ"の内側ではないはずです。 – vfn

0

私はあなたがその

<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' %> 
関連する問題