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

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

ただいまの
回答率

90.42%

  • HTML

    9867questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    6415questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • HTML5

    4425questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    2268questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

  • ラジオボタン

    24questions

    ラジオボタンはフォームに使われる要素のひとつであり、ユーザに限られた選択肢からひとつの答えを選んでもらうというものです。

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

受付中

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 2,536

EUZEU_TELOG

score 2

前提・実現したいこと

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

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

ラジオボタンでコンテンツ表示・非表示
<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">
<!--
function view_ch(elemid) {
var elem4 = document.getElementById('area_' + elemid);
form_elem4 = document.form4.elements[elemid];

var i;
if (form_elem4.length) {
for (i = 0; i < form_elem4.length; i++) {
if (form_elem4[i].checked) {
if(form_elem4[i].value == 1){
elem4.style.display = "";
}else {
elem4.style.display = "none";
}
}
}
} else {
if (form_elem4.checked) {
if(form_elem4.value == 1){
elem4.style.display = "";
}else {
elem4.style.display = "none";
}
}
}
}
-->
</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/ツール等のバージョンなど)

より詳細な情報

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2017/04/05 03:11

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

    キャンセル

回答 2

+3

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

<style>
#form4 input[type=radio][value="0"]:checked ~ p{display:none;}
</style>
<form id="form4" action="#" method="POST">
<div id="area_hoge4_1">
<input type="radio" name="hoge4_1" value="1" checked="checked" /> 表示
<input type="radio" name="hoge4_1" value="0" /> 非表示
<p>ここを表示する</p>
</div>
<div id="area_hoge4_2">
<input type="radio" name="hoge4_2" value="1" checked="checked" /> 表示
<input type="radio" name="hoge4_2" value="0" /> 非表示
<p>ここを表示する</p>
</div>
</form>

 調整版

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

<style>
form[name=form4] input[type=radio][value="0"]:checked ~ p{display:none;}
</style>
<form name="form4" action="#" method="POST">
<div id="area_hoge4_1">
<input type="radio" name="hoge4_1" value="1" checked="checked" /> 表示
<input type="radio" name="hoge4_1" value="0" /> 非表示
<p>ここを表示する</p>
</div>
<div id="area_hoge4_2">
<input type="radio" name="hoge4_2" value="1" checked="checked" /> 表示
<input type="radio" name="hoge4_2" value="0" /> 非表示
<p>ここを表示する</p>
</div>
</form>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/04/04 12:11

    <style>の部分だけでラジオボタン(?)のデザインは変更可能ですか?ラジオボタンと表示・非表示は機能するんですが、デザインがしょぼい初期のままです。#forum4というのは何を表してるんですか?CSSと上手く紐付ける方法を教えてくださるとありがたいです。

    キャンセル

  • 2017/04/04 12:55

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

    キャンセル

+2

<form name="form4" action="#" method="POST"> 
  <p>
    <label class="label-radio"> 
      <input type="radio" name="hoge4_1" value="1" onClick="view_ch('hoge4_1')" checked="checked" />
      <span class="lever">Choose.01</span>
    </label>
    <label class="label-radio"> 
      <input type="radio" name="hoge4_1" value="0" onClick="view_ch('hoge4_1')" />
      <span class="lever">Choose.02</span>
    </label>
  </p> 
</form>

※いじってません

.pt20{ 
  padding-top: 20px; 
}

.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; 
}

.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); 
}

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

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

.label-radio input[type="radio"]:checked{
  //チェック状態を表す
}

.label-radio input[type="radio"]{
  //未チェックの状態を表す
}

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

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/04/04 11:55

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

    キャンセル

同じタグがついた質問を見る

  • HTML

    9867questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    6415questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • HTML5

    4425questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    2268questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

  • ラジオボタン

    24questions

    ラジオボタンはフォームに使われる要素のひとつであり、ユーザに限られた選択肢からひとつの答えを選んでもらうというものです。

  • トップ
  • HTMLに関する質問
  • 『ガチ初心者』ラジオボタンの表示・非表示機能とラジオボタンのデザインコードを両立させたい