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

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

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

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

Q&A

解決済

2回答

508閲覧

JavaScriptで、ラジオボタンを使ったCSSスタイルを表示・非表示に変えたい。

Singo109

総合スコア15

JavaScript

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

0グッド

2クリップ

投稿2019/03/25 08:32

編集2019/03/26 03:08

ラジオボタンを使ってcssのスタイルを表示・非表示をしたい

###質問の内容。
javaScriptでtodoListというものを作っています。
ラジオボタンには、すべて/作業中/完了の3つチェックボタンがあり、それぞれチェックするとそれに合った配列が表示される様な仕組みを作っています。チェックは1つしか選択できません。

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

addEventListenerとif文で条件分岐しチェックされた項目がtrueの場合、チェックされてない配列をstyle.display="none"で非表示にし、falseの場合は同じ配列のstyle.display=""とし再表示されると思っていたのですが、一旦非表示になるとチェックを外しても非表示のまま戻らないです。

該当のソースコード 

html

1 2<!DOCTYPE html> 3<html lang="ja"> 4<head> 5 <meta charset="utf-8"> 6 <title>todoアプリ</title> 7 <link rel="stylesheet" href="css/styles.css"> 8</head> 9<body> 10 <h1>ToDoリスト</h1> 11 <form name="form1" id="checkedTask"> 12 <input type="radio" name="task" id="radio-all" checked>すべて</input> 13 <input type="radio" name="task" id="radio-work" >作業中</input> 14 <input type="radio" name="task" id="radio-done" >完了</input> 15 </form> 16 17 <div class="todolist"> 18 <p>ID コメント 状態</p> 19 <ol start="0" id="task-list"> 20 <!-- <li>タスク1 21 <button>作業中</button> 22 <button>削除</button> 23 </li> --> 24 25 </ol> 26 </div> 27 28 <div class="newtask"> 29 <h1>新規タスク追加</h1> 30 <form id="form"> 31 <input type="text" id="new-task" value=""> 32 <button class="btn" type="button" id="btn">追加</button> 33 <form> 34 </div> 35 36 37 38 <script src="js/main.js"></script> 39</body> 40 41</html>

javascript

1 2(function(){ 3 'use strict' 4 var btn = document.getElementById('btn'); 5 var taskList = document.getElementById('task-list'); /*olタグ*/ 6 var tasks = []; 7 var radioWork = document.getElementById('radio-work'); /*ラジオボタン作業中のid*/ 8 var radioDone = document.getElementById('radio-done'); /*ラジオボタン完了のid*/ 9 var radioAll = document.getElementById('radio-all'); 10 11 12 /*作業中ボタン作成処理*/ 13 var createWorkBtn = function(){ 14 var WorkBtn = document.createElement('button'); 15 var WorkText = document.createTextNode('作業中'); 16 WorkBtn.appendChild(WorkText); 17 // 作業ボタン押下処理 18 WorkBtn.addEventListener('click',function(){ 19 if(this.textContent == "作業中"){ 20 this.textContent = "完了"; 21 // 親要素へclassNameをつける処理 22 var doneParent = this.parentNode; 23 doneParent.className= 'workDone';/*完了class*/ 24 }else{ 25 this.textContent = "作業中"; 26 // ボタン押下で生成されたdomの中の親要素へclassNameをつける処理 27 var workParent = this.parentNode; 28 workParent.className = 'work';/*作業中class*/ 29 } 30 }) 31 return WorkBtn; 32 } 33 34 // 削除ボタン作成処理 35 var createDelBtn = function(){ 36 var delBtn = document.createElement('button'); 37 var delText = document.createTextNode('削除'); 38 delBtn.appendChild(delText); 39 delBtn.id = 'delId'; 40 41 // 削除ボタン押下処理 42 delBtn.addEventListener('click',function(){ 43 var li = this.parentNode; 44 var result = confirm('タスクを削除しますか?'); 45 if(result){ 46 li.remove(); 47 alert('削除しました。'); 48 return; 49 }else{ 50 return; 51 } 52 }) 53 return delBtn; 54 } 55 56 /*追加ボタン押下時処理 タスクを追加する*/ 57 btn.addEventListener('click',function(){ 58 var form = document.getElementById('form'); 59 var task = document.getElementById('new-task').value; 60 if(task==""){ 61 alert("タスクを入力して下さい"); 62 return; 63 } 64 tasks.push(task); /*new-taskの値を配列tasksへpush */ 65 66 //liタグ作成処理 67 var li = document.createElement('li'); 68 li.className = 'work'; 69 taskList.appendChild(li); /*taskList(olタグ)の子要素へ変数liを入れる*/ 70 71 for(var i = 0; i < tasks.length; i++ ){ /*i==配列のインデックス*/ 72 li.textContent = tasks[i] /*liタグの要素へ配列tasks[i]を代入*/ 73 } 74 li.appendChild(createWorkBtn()); /*returnで帰ってきたworkBtn*/ 75 li.appendChild(createDelBtn());/*returnで帰ってきたDelBtn*/ 76 }) 77 78 79 /*ラジオボタン完了を押下時の処理*/ 80 81 radioDone.addEventListener('click',function(){ 82 var workTsks = document.getElementsByClassName('work'); 83 workTsks = Array.from(workTsks); 84 85 if(radioDone.checked === true){ 86 workTsks.forEach(function(workTsks){ 87 workTsks.style.display = "none"; 88 }) 89 }else{ 90 workTsks.forEach(function(workTsks){ 91 workTsks.style.display = ""; 92 }) 93 } 94 }) 95 96 97 // ラジオボタン作業中押下時処理 98 99 radioWork.addEventListener('click',function(){ 100 var doneTsks = document.getElementsByClassName('workDone'); 101 doneTsks = Array.from(doneTsks); 102 103 if(radioWork.checked === true){ 104 doneTsks.forEach(function(doneTsks){ 105 doneTsks.style.display = "none"; 106 }) 107 }else{ 108 doneTsks.forEach(function(doneTsks){ 109 doneTsks.style.display = "none"; 110 }) 111 } 112 }) 113 114})();

試したこと

ググって2時間くらい調べましたが、上記のコードで表示/非表示を切り替わる内容の記事鹿見つけることが出来ませんでした。

補足情報(atom editor使用しています)

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

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

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

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

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

kei344

2019/03/25 08:34

(質問文は編集できます)HTMLも質問文に追記してください。また、質問文のHTML/JavaScriptはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
guest

回答2

0

ベストアンサー

CSS でしたほうが楽なのでは?

とはいうものの、一応 JavaScript でするため適当な HTML をでっちあげます。

HTML

1 <form action="#"> 2 <div> 3 <input type="radio" name="radio" value="toggleTarget" id="radioAll" checked="checked" />すべて 4 <input type="radio" name="radio" value="work" id="radioWork" />作業中 5 <input type="radio" name="radio" value="workDone" id="radioDone" />完了 6 </div> 7 <div class="toggleTarget work">work1</div> 8 <div class="toggleTarget work">work2</div> 9 <div class="toggleTarget workDone">workDone1</div> 10 <div class="toggleTarget workDone">workDone2</div> 11 </form>

JavaScript

1var form = document.forms[0]; 2form.addEventListener('change', function(event) { 3 var value = form.elements['radio'].value; 4 var toggleTargets = document.getElementsByClassName('toggleTarget'); 5 Array.from(toggleTargets).forEach(function(toggleTarget) { 6 toggleTarget.style.display = toggleTarget.classList.contains(value) ? '' : 'none'; 7 }); 8}, false);

対象外のみ 'none' にし、ほかは '' (削除)とできるように制御してください。

投稿2019/03/25 09:04

x_x

総合スコア13749

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

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

0

x_xさんのソースを借ります
ラジオボタンを表示要素と並列におけばcssだけでいけそうですけどね

css

1<style> 2[type=radio][name=r1][value=work]:checked ~ div.toggleTarget:not(.work){display:none;} 3[type=radio][name=r1][value=workDone]:checked ~ div.toggleTarget:not(.workDone){display:none;} 4</style> 5<form action="#"> 6<label><input type="radio" name="r1" value="toggleTarget" id="radioAll" checked="checked" />すべて</label> 7<input type="radio" name="r1" value="work" id="radioWork" /><label for="radioWork">作業中</label> 8<input type="radio" name="r1" value="workDone" id="radioDone" /><label for="radioDone">完了</label> 9<div class="toggleTarget work">work1</div> 10<div class="toggleTarget work">work2</div> 11<div class="toggleTarget workDone">workDone1</div> 12<div class="toggleTarget workDone">workDone2</div> 13</form>

投稿2019/03/25 09:26

yambejp

総合スコア114574

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問