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

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

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

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

Q&A

解決済

2回答

254閲覧

checkboxのチェックを一括で外す方法を1ページ内に複数設置したい

fuuc0238

総合スコア9

JavaScript

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

0グッド

0クリップ

投稿2023/05/19 21:00

実現したいこと

checkboxのチェックを一括で外す方法を1ページ内に複数設置したいのですが
おそらくinputにIDが振られていない為一番最後のボタンしか作動がしない状態です。

該当のソースコード

html

1<form name="form1"> 2 <table> 3 <tbody> 4 <tr> 5 <th>タイトル1</th> 6 <th>タイトル2</th> 7 </tr> 8 <tr> 9 <td> 10 <label><input type="checkbox"><span></span>テキスト1</label> 11 </td> 12 <td>テキスト2</td> 13 </tr> 14 </tbody> 15 </table> 16 <input type="button" value="チェックをリセット" onclick="allcheck(false);"> 17 <script> 18 function allcheck( tf ) { 19 var ElementsCount = document.form1.elements.length; 20 for( i=0 ; i<ElementsCount ; i++ ) { 21 document.form1.elements[i].checked = tf; 22 } 23 } 24 </script> 25</form> 26<form name="form2"> 27 <table> 28 <tbody> 29 <tr> 30 <th>タイトル1</th> 31 <th>タイトル2</th> 32 </tr> 33 <tr> 34 <td> 35 <label><input type="checkbox"><span></span>テキスト1</label> 36 </td> 37 <td>テキスト2</td> 38 </tr> 39 </tbody> 40 </table> 41 <input type="button" value="チェックをリセット" onclick="allcheck(false);"> 42 <script> 43 function allcheck( tf ) { 44 var ElementsCount = document.form2.elements.length; 45 for( i=0 ; i<ElementsCount ; i++ ) { 46 document.form2.elements[i].checked = tf; 47 } 48 } 49 </script> 50</form>

試したこと

フォームにはidを振っていますが、ボタンにidを振ってないためおそらく作動しないかと思われますが
ボタンにidを付ければ動くかと思われますがどのように指定すればわからなく質問をさせて頂きました。

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

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

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

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

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

guest

回答2

0

適用範囲を絞れば同じ関数で処理できるでしょう

javascript

1<script> 2function allcheck( tf) { 3 event.target.form.querySelectorAll('[type=checkbox]').forEach(x=>{ 4 x.checked = tf; 5 }); 6} 7</script> 8<form> 9<input type="checkbox"> 10<input type="checkbox"> 11<input type="checkbox"><br> 12<input type="button" value="チェックをリセット" onclick="allcheck(false,this);"> 13<input type="button" value="すべてをチェック" onclick="allcheck(true);"> 14</form> 15<form> 16<input type="checkbox"> 17<input type="checkbox"> 18<input type="checkbox"><br> 19<input type="button" value="チェックをリセット" onclick="allcheck(false);"> 20<input type="button" value="すべてをチェック" onclick="allcheck(true);"> 21</form>

投稿2023/05/22 01:07

yambejp

総合スコア114779

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

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

0

ベストアンサー

おそらくinputにIDが振られていない為一番最後のボタンしか作動がしない状態です。

そうではなくて、allcheck とメソッド名を同名にしているところが問題です。後で出て来た方で上書きされるので、質問のコードで言うと後の方の allcheck しかないのと同じになります。

メソッド名を変えて、例えば allcheck1, allcheck2 ... というようにしてください。

投稿2023/05/19 22:33

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

fuuc0238

2023/05/19 23:29

ありがとうございます、早速試した所問題なく作動しました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問