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

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

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

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Q&A

解決済

1回答

3180閲覧

[javascript,typescript]特定チェックボックスにチェックをつけたら他のチェックボックスにもチェックをつけたい

Discord

総合スコア51

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

0グッド

0クリップ

投稿2021/07/07 09:00

編集2021/07/07 11:29

下記のようなチェックボックスがあります。

html

1<input type="checkbox" name="hoge[]" value="10" checked=""> 2<input type="checkbox" name="hoge[]" value="20" checked=""> 3<input type="checkbox" name="hoge[]" value="30" checked=""> 4<input type="checkbox" name="hoge[]" value="40" checked="">

valueが「10」のチェックボックスにチェックが入ったら、valueが「20」のチェックボックスにもチェックをつけたいです。
チェックが外れたら逆にチェックを外したいです。

TypeScript

1... 2... 3 document.querySelectorAll( 4 "input[type='checkbox'][name='hoge[]']", 5 ), 6 element => { 7 element.addEventListener('change', event => { 8 const input_check = event.target as HTMLInputElement; 9 if (input_check.checked) { 10 // チェックされたらここにくる 11 } 12 }); 13 }, 14... 15...

こんな感じでチェックがされたときのイベントは拾えるようになったのですが、valueが「10」のときvalueが「20」のチェックボックスにもチェックつけるということができず悩んでいます。

ご教示お願いいたします。

追記:やはりinputにidがないと難しいのでしょうか。。

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

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

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

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

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

yambejp

2021/07/08 00:39 編集

チェック10,20がチェックサれている状態で20を外したらどうするのでしょうか? ・10もはずれる ・20は10がチェックされている状態だとはずせない ・20の挙動は10に影響しない
Discord

2021/07/08 06:14

・20の挙動は10に影響しない です! ただ、いただいた回答の内容を参考にできそうです! ありがとうございます!
guest

回答1

0

ベストアンサー

javascript

1<script> 2window.addEventListener('DOMContentLoaded', ()=>{ 3 document.querySelector('[name="hoge[]"][value="10"]').addEventListener('change',e=>{ 4 document.querySelector('[name="hoge[]"][value="20"]').checked=e.target.checked; 5 }); 6}); 7</script> 8 9<label><input type="checkbox" name="hoge[]" value="10">10</label> 10<label><input type="checkbox" name="hoge[]" value="20">20</label> 11<label><input type="checkbox" name="hoge[]" value="30">30</label> 12<label><input type="checkbox" name="hoge[]" value="40">40</label>

投稿2021/07/08 00:39

yambejp

総合スコア116724

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問