###前提・実現したいこと
ガチ初心者です。
ラジオボタンを使ったコンテンツの表示・非表示をコピペして使用していた所ラジオボタンのデザインを変えたくて、そのデザインコードを記述したいのですが、デザインを変えるとラジオボタンの表示・非表示が上手く機能しません。両方を両立させるにはどうしたらいいのか教えてください。

###発生している問題・エラーメッセージ
ラジオボタンでコンテンツ表示・非表示

<form name="form4" action="#" method="POST"> <p> <input type="radio" name="hoge4_1" value="1" onClick="view_ch('hoge4_1')" checked="checked" /> 表示 <input type="radio" name="hoge4_1" value="0" onClick="view_ch('hoge4_1')" /> 非表示 </p> <div id="area_hoge4_1"> <p>ここを表示する</p> </div> <p> <input type="radio" name="hoge4_2" value="1" onClick="view_ch('hoge4_2')" checked="checked" /> 表示 <input type="radio" name="hoge4_2" value="0" onClick="view_ch('hoge4_2')" /> 非表示 </p> <div id="area_hoge4_2"> <p>ここを表示する</p> </div> </form> <script language="JavaScript" type="text/javascript">  </script>

###該当のソースコード
ラジオボタンのデザインコード

<div class="container pt20"> <div class="row pt20"> <div class="col-xs-12"> <div class="form-group radio-wrap text-center"> <label class="label-radio"> <input type="radio" name="radio" /> <span class="lever">Choose.01</span> </label> <label class="label-radio"> <input type="radio" name="radio" /> <span class="lever">Choose.02</span> </label> <label class="label-radio"> <input type="radio" name="radio" /> <span class="lever">Choose.03</span> </label> </div> </div> </div> </div> /-------------------------------------------------------/ .pt20{ padding-top: 20px; }

.checkbox-wrap{
}
.label-checkbox input[type="checkbox"]{
display: none;
}
.label-checkbox{
cursor: pointer;

position: relative;
}
.label-checkbox .lever{
display: block;
color: #ccc;
font-weight: normal;
display: inline-block;
padding: 8px 40px;
border: 1px solid #e5e5e5;
border-radius:20px;
margin-right: 10px;
margin-bottom: 10px;
-webkit-transition: all 300ms cubic-bezier(1, 0, 0, 1);
-moz-transition: all 300ms cubic-bezier(1, 0, 0, 1);
-o-transition: all 300ms cubic-bezier(1, 0, 0, 1);
transition: all 300ms cubic-bezier(1, 0, 0, 1);
-webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);
-moz-transition-timing-function: cubic-bezier(1, 0, 0, 1);
-o-transition-timing-function: cubic-bezier(1, 0, 0, 1);
transition-timing-function: cubic-bezier(1, 0, 0, 1);
}
.label-checkbox .lever:before{
content:'';
position: absolute;
left: 4px;
top:4px;
border: 1px solid #e5e5e5;
background: #fff;
width: 30px;
height: 30px;
border-radius:100%;
-webkit-transition: all 300ms cubic-bezier(1, 0, 0, 1);
-moz-transition: all 300ms cubic-bezier(1, 0, 0, 1);
-o-transition: all 300ms cubic-bezier(1, 0, 0, 1);
transition: all 300ms cubic-bezier(1, 0, 0, 1);
-webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);
-moz-transition-timing-function: cubic-bezier(1, 0, 0, 1);
-o-transition-timing-function: cubic-bezier(1, 0, 0, 1);
transition-timing-function: cubic-bezier(1, 0, 0, 1);
}
.label-checkbox:hover .lever:before{
border-color: #ddd;
}
.label-checkbox input[type="checkbox"]:checked + .lever{
background: #5cb85c;
color: #fff;
}
.label-checkbox input[type="checkbox"]:checked + .lever{
border-color:#5cb85c;
}
.label-checkbox input[type="checkbox"]:checked + .lever:before{
left: 100%;
margin-left: -44px;
border-color: #fff;
}

.radio-wrap{

}
.label-radio input[type="radio"]{
display: none;
}
.label-radio{
cursor: pointer;
color: #828c9a;
font-weight: normal;
letter-spacing: 0;
display: inline-block;
position: relative;
margin-right: 20px;
}
.label-radio .lever:before{
content:'';
border: 1px solid #ddd;
width: 20px;
height: 20px;
margin-right: 10px;
display: inline-block;
vertical-align: middle;
border-radius:10px;
-webkit-transition: all 800ms cubic-bezier(1, 0, 0, 1);
-moz-transition: all 800ms cubic-bezier(1, 0, 0, 1);
-o-transition: all 800ms cubic-bezier(1, 0, 0, 1);
transition: all 800ms cubic-bezier(1, 0, 0, 1);
-webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);
-moz-transition-timing-function: cubic-bezier(1, 0, 0, 1);
-o-transition-timing-function: cubic-bezier(1, 0, 0, 1);
transition-timing-function: cubic-bezier(1, 0, 0, 1);
}
.label-radio input[type="radio"]:checked + .lever:before{
opacity: 0;
background: #eee;
border-color: #eee;
transform:scale(2);
}
.label-radio .lever:after{
content:'';
opacity: 0;
position: absolute;
left: 8px;
top: 0px;
width:8px;
height: 16px;
border-right: 2px solid #ddd;
border-bottom: 2px solid #ddd;
transform:rotate(-200deg);
-webkit-transition: all 400ms cubic-bezier(1, 0, 0, 1);
-moz-transition: all 400ms cubic-bezier(1, 0, 0, 1);
-o-transition: all 400ms cubic-bezier(1, 0, 0, 1);
transition: all 400ms cubic-bezier(1, 0, 0, 1);
-webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);
-moz-transition-timing-function: cubic-bezier(1, 0, 0, 1);
-o-transition-timing-function: cubic-bezier(1, 0, 0, 1);
transition-timing-function: cubic-bezier(1, 0, 0, 1);
}
.label-radio input[type="radio"]:checked + .lever:after{
opacity: 1;
position: absolute;
left: 8px;
top: 0px;
width:8px;
height: 16px;
border-right: 2px solid #5bc0de;
border-bottom: 2px solid #5bc0de;
transform:rotate(40deg);
}

###試したこと
nameとかidとかclassを一緒にしてみたりしましたが初心者すぎて調べても解らなかったのでここに質問させていただきました。

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

kei344

2017/04/04 18:11

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

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

回答2件

cssと構造だけでやるならこんな感じにしたほうがよいでしょう

HTML
1<style>
2#form4 input[type=radio][value="0"]:checked ~ p{display:none;}
3</style>
4<form id="form4" action="#" method="POST">
5<div id="area_hoge4_1">
6<input type="radio" name="hoge4_1" value="1" checked="checked" /> 表示
7<input type="radio" name="hoge4_1" value="0" /> 非表示
8<p>ここを表示する</p>
9</div>
10<div id="area_hoge4_2">
11<input type="radio" name="hoge4_2" value="1" checked="checked" /> 表示
12<input type="radio" name="hoge4_2" value="0" /> 非表示
13<p>ここを表示する</p>
14</div>
15</form>
16

調整版

きょうびformにnameをつけて管理することはないと思って
上記のようにidを振りましたがnameを前提にするなら以下のような感じでしょうか？
ちなみに、ラジオボタンと表示・非表示を替えるpが同じレベルの構造にいないといけないので
もとのHTMLの構造を変更できないなら、この方法では無理です

HTML
1<style>
2form[name=form4] input[type=radio][value="0"]:checked ~ p{display:none;}
3</style>
4<form name="form4" action="#" method="POST">
5<div id="area_hoge4_1">
6<input type="radio" name="hoge4_1" value="1" checked="checked" /> 表示
7<input type="radio" name="hoge4_1" value="0" /> 非表示
8<p>ここを表示する</p>
9</div>
10<div id="area_hoge4_2">
11<input type="radio" name="hoge4_2" value="1" checked="checked" /> 表示
12<input type="radio" name="hoge4_2" value="0" /> 非表示
13<p>ここを表示する</p>
14</div>
15</form>

投稿2017/04/04 01:51

総合スコア114784

2017/04/04 03:11

2017/04/04 03:55

調整版のせときました。 HTMLの構造さえかわらなければデザインを付加していって問題ないと思います

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

html
1<form name="form4" action="#" method="POST"> 
2  <p>
3    <label class="label-radio"> 
4      <input type="radio" name="hoge4_1" value="1" onClick="view_ch('hoge4_1')" checked="checked" />
5      <span class="lever">Choose.01</span>
6    </label>
7    <label class="label-radio"> 
8      <input type="radio" name="hoge4_1" value="0" onClick="view_ch('hoge4_1')" />
9      <span class="lever">Choose.02</span>
10    </label>
11  </p> 
12</form>

※いじってません

css
1.pt20{ 
2  padding-top: 20px; 
3}
4
5.label-checkbox input[type="checkbox"]{ 
6  display: none; 
7} 
8.label-checkbox{ 
9  cursor: pointer;
10  position: relative; 
11} 
12
13.label-checkbox .lever{ 
14  display: block; 
15  color: #ccc; 
16  font-weight: normal; 
17  display: inline-block; 
18  padding: 8px 40px; 
19  border: 1px solid #e5e5e5; 
20  border-radius:20px; 
21  margin-right: 10px; 
22  margin-bottom: 10px; 
23  -webkit-transition: all 300ms cubic-bezier(1, 0, 0, 1); 
24  -moz-transition: all 300ms cubic-bezier(1, 0, 0, 1); 
25  -o-transition: all 300ms cubic-bezier(1, 0, 0, 1); 
26  transition: all 300ms cubic-bezier(1, 0, 0, 1); 
27  -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1); 
28  -moz-transition-timing-function: cubic-bezier(1, 0, 0, 1); 
29  -o-transition-timing-function: cubic-bezier(1, 0, 0, 1); 
30  transition-timing-function: cubic-bezier(1, 0, 0, 1); 
31} 
32
33.label-checkbox .lever:before{ 
34  content:''; 
35  position: absolute; 
36  left: 4px; 
37  top:4px; 
38  border: 1px solid #e5e5e5; 
39  background: #fff; 
40  width: 30px; 
41  height: 30px; 
42  border-radius:100%; 
43  -webkit-transition: all 300ms cubic-bezier(1, 0, 0, 1); 
44  -moz-transition: all 300ms cubic-bezier(1, 0, 0, 1); 
45  -o-transition: all 300ms cubic-bezier(1, 0, 0, 1); 
46  transition: all 300ms cubic-bezier(1, 0, 0, 1); 
47  -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1); 
48  -moz-transition-timing-function: cubic-bezier(1, 0, 0, 1); 
49  -o-transition-timing-function: cubic-bezier(1, 0, 0, 1); 
50  transition-timing-function: cubic-bezier(1, 0, 0, 1); 
51} 
52.label-checkbox:hover .lever:before{ 
53  border-color: #ddd;
54} 
55.label-checkbox input[type="checkbox"]:checked + .lever{ 
56  background: #5cb85c; 
57  color: #fff; 
58} 
59.label-checkbox input[type="checkbox"]:checked + .lever{ 
60  border-color:#5cb85c; 
61} 
62.label-checkbox input[type="checkbox"]:checked + .lever:before{ 
63  left: 100%; 
64  margin-left: -44px; 
65  border-color: #fff; 
66}
67
68.label-radio input[type="radio"]{ 
69  display: none; 
70} 
71
72.label-radio{ 
73  cursor: pointer; 
74  color: #828c9a; 
75  font-weight: normal; 
76  letter-spacing: 0; 
77  display: inline-block; 
78  position: relative; 
79  margin-right: 20px; 
80} 
81.label-radio .lever:before{ 
82  content:''; 
83  border: 1px solid #ddd; 
84  width: 20px; 
85  height: 20px; 
86  margin-right: 10px; 
87  display: inline-block; 
88  vertical-align: middle; 
89  border-radius:10px; 
90  -webkit-transition: all 800ms cubic-bezier(1, 0, 0, 1); 
91  -moz-transition: all 800ms cubic-bezier(1, 0, 0, 1); 
92  -o-transition: all 800ms cubic-bezier(1, 0, 0, 1); 
93  transition: all 800ms cubic-bezier(1, 0, 0, 1); 
94  -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1); 
95  -moz-transition-timing-function: cubic-bezier(1, 0, 0, 1); 
96  -o-transition-timing-function: cubic-bezier(1, 0, 0, 1); 
97  transition-timing-function: cubic-bezier(1, 0, 0, 1); 
98} 
99.label-radio input[type="radio"]:checked + .lever:before{ 
100  opacity: 0; 
101  background: #eee; 
102  border-color: #eee; 
103  transform:scale(2); 
104} 
105.label-radio .lever:after{ 
106  content:''; 
107  opacity: 0; 
108  position: absolute; 
109  left: 8px; 
110  top: 0px; 
111  width:8px; 
112  height: 16px; 
113  border-right: 2px solid #ddd; 
114  border-bottom: 2px solid #ddd; 
115  transform:rotate(-200deg); 
116  -webkit-transition: all 400ms cubic-bezier(1, 0, 0, 1); 
117  -moz-transition: all 400ms cubic-bezier(1, 0, 0, 1); 
118  -o-transition: all 400ms cubic-bezier(1, 0, 0, 1); 
119  transition: all 400ms cubic-bezier(1, 0, 0, 1); 
120  -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1); 
121  -moz-transition-timing-function: cubic-bezier(1, 0, 0, 1); 
122  -o-transition-timing-function: cubic-bezier(1, 0, 0, 1); 
123  transition-timing-function: cubic-bezier(1, 0, 0, 1); 
124} 
125.label-radio input[type="radio"]:checked + .lever:after{ 
126  opacity: 1; 
127  position: absolute; 
128  left: 8px; 
129  top: 0px; 
130  width:8px; 
131  height: 16px; 
132  border-right: 2px solid #5bc0de; 
133  border-bottom: 2px solid #5bc0de; 
134  transform:rotate(40deg); 
135}

こレで行けるかと思います。
また、radioボタンやcheckboxなどは基本的にカスタマイズすることは出来ません。
なので、こういう形のカスタマイズ方法では、defaultのradioボタンやcheckboxはdisplay: none;で隠し、近くにある要素（大体隣りにある要素にすることが多い）をカスタマイズすることで、自分の思い通りにレイアウトを組むことを実現しています。

詳しく書くと、radioボタンがチェック済み or 未チェックの状態をcssで書くと:checkedで表すことが出来、以下のようになります。

css
1.label-radio input[type="radio"]:checked{
2  //チェック状態を表す
3}
4
5.label-radio input[type="radio"]{
6  //未チェックの状態を表す
7}

ということはこの状態にある要素の横にある要素を指定すれば、チェック状態と未チェック状態でレイアウトを変更できるというわけです

css
1.label-radio input[type="radio"]:checked + .lever{
2  // チェック状態のときにinput[type="radio"]の隣の.leverのcssを指定できる
3}

このようにcssを変更することで実際には変更できないinputタグのレイアウトを変更しているわけです。

長くなりましたが、上記でイケルと思います！

投稿2017/04/04 01:59

MasakazuFukami

総合スコア1869

EUZEU_TELOG

2017/04/04 02:55

回答ありがとうございます。これだと表示・非表示させたいコンテンツをどこに挿入していいのか解らないのですが…初心者過ぎてごめんなさい。初期のラジオボタンだとデザインがしょぼいので、デザイン要素を追加したいんです。ラジオボタンで表示・非表示と両立させる方法が解りません。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

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

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

質問する

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

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

『ガチ初心者』ラジオボタンの表示・非表示機能とラジオボタンのデザインコードを両立させたい

調整版

関連した質問