チェックボックスをラジオボタンの様に扱わせたい

cssの擬似クラスである:checkedを使いコンテンツが非表示される仕組みを製作したのですが、ラジオボタンの様にcheck01をクリックして隠されたコンテンツを表示し、その状態でcheck02をクリックしたらcheck01のチェックが外れ、check01のコンテツが非表示になるという仕組みをjavascriptを使い行いたいです。
コードをどのように書けば実装されるでしょうか。
よろしくお願いします。

以下にアップロードしたサイトのURLとhtml、cssのソースコードを掲載しています。

http://www.geocities.jp/jyqwc878/check/index.html

html

<body> <section> <label for="check01">check01</label> <input id="check01" type="checkbox"> <div class="panel"> <p>check01のここにテキストが入ります。</p> </div> </section> <section> <label for="check02">check02</label> <input id="check02" type="checkbox"> <div class="panel"> <p>check02のテキストが入ります。</p> </div> </section> <section> <label for="check03">check03</label> <input id="check03" type="checkbox"> <div class="panel"> <p>check03のテキストが入ります。</p> </div> </section> </body>

css

input {
display: none;
}
label {
cursor: pointer;
display: inline-block;
padding: 10px 20px;
border-radius: 4px;
background: #0bd;
color: #FFF;
-webkit-transition: 0.1s;
transition: 0.1s;
}
label:hover {
background: #0090aa;
}
.panel {
-webkit-transition: .3s ease;
transition: .3s ease;
height: 0;
overflow: hidden;
background: #F5F0CF;
margin-top: 10px;
padding: 0;
border-radius: 5px;
}
input:checked + .panel {
height: auto;
padding: 15px;
}

行動規範の内容に同意します

回答4件

質問とはズレますし御存じとは思いますが念のため。

HTML
1<section>
2<label for="check01">check01</label>
3<input id="check01" type="radio" name="check">
4
5<div class="panel">
6  <p>check01のここにテキストが入ります。</p>
7</div>
8</section>
9
10<section>
11<label for="check02">check02</label>
12<input id="check02" type="radio" name="check">
13
14<div class="panel">
15  <p>check02のテキストが入ります。</p>
16</div>
17</section>
18
19<section>
20<label for="check03">check03</label>
21<input id="check03" type="radio" name="check">
22
23<div class="panel">
24  <p>check03のテキストが入ります。</p>
25</div>
26</section>

ラジオボタンにすればCSSだけで動きますよ。

投稿2016/03/12 09:53

Lhankor_Mhy

総合スコア37634

yamato_hikawa

2016/03/12 12:32

作りたいものを考えると、ラジオボタンの方が適切そうですよね。

行動規範の内容に同意します

どんぴしゃな回答がamaranthineさんから出ているのでjqueryを使わない方法で。

HTML
1<script type="text/javascript">
2window.onload = function() {
3  var ar = Array.prototype.slice.call(document.getElementsByTagName('input'));
4  for(e in ar) {
5    ar[e].onchange = function() {
6      for(ee in ar) {
7        ar[ee].checked = false;
8      }
9      this.checked = true;
10    };
11  }
12};
13</script>

投稿2016/03/12 09:38

編集2016/03/12 09:54

shi_ue

総合スコア4437

amaranthine

2016/03/13 12:14

jqueryを使わない方がかっちょいいなぁ。。。

shi_ue

2016/03/13 12:25

こう見ると、jqueryは偉大ですね。 amaranthineさんのサンプルの方がシンプルで分かり易いですよね。

amaranthine

2016/03/13 16:42

そうですね、jQueryはほんと偉大ですよね（これ何回思ったか分からない）。ただ、すぐにjQueryのコードが浮かんでしまって、JSの勉強が捗らないんですよ。。jQueryに頼らず書きたいものです。

owl

2016/03/22 06:45

返信が遅れて申し訳ありません。 javascriptのみでも思っていた挙動になりました。コードを眺めているだけでもとても勉強になります。本当にありがとうございます。

行動規範の内容に同意します

ベストアンサー

タイトルと質問が一致していないのか、それとも私が言いたいことを理解できていないのか不明ですが、
jqueryを使って、下記スクリプトで1をチェックしたら、2と3がチェックが外れ、2をチェックしたら、1と3のチェックが外れ…というのでしたら、実現できます。

html
1<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

をheadタグの中に入れ、

javascript
1<script>
2  $('input[type=checkbox]').change(function() {
3
4    $('input[type=checkbox]').prop('checked', false);
5    $(this).prop('checked', true);
6
7  });
8</script>

をbodyの最下部に入れます。

投稿2016/03/12 08:58

amaranthine

総合スコア501

owl

2016/03/22 06:43

返信が遅れて申し訳ありません。無事に思っていた挙動になりました。コードもとてもシンプルで私でも理解できました。本当にありがとうございます。

行動規範の内容に同意します

ちょっとヒントを。

Javascript
1document.getElementById('check01').checked = true;
2document.getElementById('check02').checked = false;
3document.getElementById('check03').checked = false;
4```ってやるとチェックを入れた動作と同じになります。