質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ruby on Rails 4

Ruby on Rails4はRubyによって書かれたオープンソースのウェブフレームワークです。 Ruby on Railsは「設定より規約」の原則に従っており、効率的に作業を行うために再開発を行う必要をなくしてくれます。

Q&A

解決済

2回答

6847閲覧

全選択・全解除のチェックボックスが実装できない。

shuzi

総合スコア197

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ruby on Rails 4

Ruby on Rails4はRubyによって書かれたオープンソースのウェブフレームワークです。 Ruby on Railsは「設定より規約」の原則に従っており、効率的に作業を行うために再開発を行う必要をなくしてくれます。

0グッド

0クリップ

投稿2019/01/29 06:32

前提・実現したいこと

チェックボックスの全選択、全解除が出来るチェックボックスを実装したい。
イメージ説明
イメージ説明
イメージ説明

発生している問題・エラーメッセージ

チェックボックスの全選択、全解除が反応しない。

該当のソースコード

rails4

1<%= form_tag({ controller: :goods, action: :destroy_all },method: 'delete') do %> 2 <table class="table"> 3 <thead> 4 <tr> 5 <th>商品画像</th> 6 <th>商品ID</th> 7 <th>商品名</th> 8 <th>価格</th> 9 <th>登録日</th> 10 <th>メーカー</th> 11 <th>カテゴリー</th> 12 <th colspan="3"></th> 13 <th><input type="checkbox" id="checkALL" name="category_all"></th> 14 </tr> 15 </thead> 16 <tbody> 17 <% @goods.each do |good| %> 18 <tr> 19 <td text-align:center;><img height="80" src="<%= good.image_url %>"/></td> 20 <td><%= good.goods_id %></td> 21 <td><%= good.name %></td> 22 <td>&yen;<%= (good.price).to_s(:delimited) %></td> 23 <td><%=h ((good.date).to_date).strftime('%Y年%m月%d日') %></td> 24 <td><%= good.maker %></td> 25 <td><%= good.category %></td> 26 <td><%= link_to '詳細', good, class: 'btn' %></td> 27 <td><%= link_to '編集', edit_good_path(good), class: 'btn' %></td> 28 <td><%= link_to '削除', good, method: :delete, data: { confirm: '本当に削除してもよろしいですか?' }, class: 'btn' %></td> 29 <td> 30 <%= check_box_tag 'goods[]', good.id %> 31 </td> 32 </tr> 33 <% end %> 34 <%= submit_tag "一括削除" %> 35 </div> 36 </tbody> 37 </div> 38 </table> 39<% end %>

javascript

1$(function(){ 2 3 var checkAll = '#checkAll'; //「すべて」のチェックボックスのidを指定 4 var checkBox = 'input[name="goods[]"]'; //チェックボックスのnameを指定 5 6 $( checkAll ).on('click', function() { 7 $( checkBox ).prop('checked', $(this).is(':checked') ); 8 }); 9 10 $( checkBox ).on( 'click', function() { 11 var boxCount = $( checkBox ).length; //全チェックボックスの数を取得 12 var checked = $( checkBox + ':checked' ).length; //チェックされているチェックボックスの数を取得 13 if( checked === boxCount ) { 14 $( checkAll ).prop( 'checked', true ); 15 } else { 16 $( checkAll ).prop( 'checked', false ); 17 } 18 }); 19 20});

試したこと

チェックボックスの名前を変更したり、ID指定に変更したり、など情報を変えてみましたが、どれもだめでした。

補足情報(FW/ツールのバージョンなど)

特になし。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

<input type="checkbox" id="checkALL" name="category_all">

var checkAll = '#checkAll'

の整合性があってません

sample

javascript

1$(function(){ 2 var checkAll = '#checkALL'; 3 var checkBox = 'input[name="goods[]"]'; 4 $( checkAll ).on('change', function() { 5 $( checkBox ).prop('checked', $(this).prop('checked')); 6 }); 7 $( checkBox ).on( 'change', function() { 8 $( checkAll ).prop( 'checked', $( checkBox ).not(':checked').length==0 ); 9 /* もしくは 10 $( checkAll ).prop( 'checked', !$( checkBox ).is(':not(:checked)')); 11 */ 12 }); 13});

投稿2019/01/29 06:38

編集2019/01/29 06:45
yambejp

総合スコア114585

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

shuzi

2019/01/29 06:41

コメントありがとうございます!! ほんと些細なミスなんでしょうが、気づくのに時間がかかりました。 nvimで何か良い設定ないか探してみてミスを事前に防げるようにいじってみます。 また何かあればどうぞよろしくお願いします。
yambejp

2019/01/29 06:45

ロジックについてsampleつけておきました
shuzi

2019/01/29 07:06

おおぉぉ!! あんなに長ったらしいコードがここまでDRYになるんですね!! 大変参考になりました!ありがとうございます!
guest

0

自己解決

投稿した後、すぐに
チェックボックスのID名が 
正「All」 → 誤り「ALL」 になっているのに気付き、修正したところ、実装できました。
1時間ぐらい悩んでたのが馬鹿らしい初歩的なミスで・・・。。
大変失礼しました。

投稿2019/01/29 06:36

shuzi

総合スコア197

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問