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

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

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

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

HTML

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

CSS

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

Q&A

解決済

5回答

4009閲覧

簡単なラジオボタンを作成してみた

asakura238

総合スコア62

JavaScript

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2016/06/21 09:48

javascript を勉強中な者です。
簡単なラジオボタンを作成しました。
そこでより簡潔なコードがございましたらご教授願います。
なお、jqueryでの回答は受け付けておりません。

HTML

1<!doctype html> 2<head> 3<meta charset="utf-8"> 4<link rel="stylesheet" href="style.css"> 5</head> 6<body> 7 8<div class="radio" name="radio" onclick="radio()"> 9<div class="on" name="on">ON</div> 10<div class="off" name="off">OFF</div> 11</div> 12 13<script src="sample.js"></script> 14</body> 15</html>

CSS

1.radio { 2 width: 100px; 3 background-color: #eee; 4 border-radius: 28px; 5 display: inline-table; 6 box-shadow: 1px 1px 5px 0px inset; 7 padding:3px; 8 text-align: center; 9 font-family: Lucida Console; 10} 11.on { 12 display: inline-block; 13 float: left; 14 padding: 10px; 15 background: #eee; 16 border-radius: 20px; 17 box-shadow: none; 18 width:29px; 19 height:16px; 20} 21.off { 22 display: inline-block; 23 float: right; 24 background-color: #9f9; 25 border-radius: 20px; 26 padding: 10px; 27 box-shadow: 1px 1px 1px 1px; 28 padding: 10px; 29 width:29px; 30 height:16px; 31 32}

javascript

1var vary = 0; 2var off = document.getElementsByClassName("off"); 3var on = document.getElementsByClassName("on"); 4function radio() { 5 if(vary==0){ 6 off[0].style.backgroundColor="#eee"; 7 off[0].style.boxShadow="none"; 8 on[0].style.backgroundColor="#9f9"; 9 on[0].style.boxShadow="1px 1px 1px 1px"; 10 vary = 1; 11 }else{ 12 off[0].style.backgroundColor="#9f9"; 13 off[0].style.boxShadow="1px 1px 1px 1px"; 14 on[0].style.backgroundColor="#eee"; 15 on[0].style.boxShadow="none"; 16 vary = 0; 17 } 18}

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

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

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

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

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

guest

回答5

0

直接の回答ではありませんが、指摘させてください。

div要素にname属性は指定できません。
HTML5では、name属性はinput要素などのフォーム部品にしか指定できません。

投稿2016/06/21 14:56

sounisi5011

総合スコア697

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

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

0

jQueryどころかJavaScriptも使用しないサンプルを作ってみました。
HTMLのラジオボタンと、CSSセレクタの:checkedを使用しています。

input要素のラジオボタンを使っているため、フォームに含めれば値の送信もできます。
またJavaScriptを使っていないので、その分安定性は高い…かもしれない。
ただし、:checkedに対応していないWebブラウザ(Internet Explorer 8以下など)で使用できないというデメリットがあります。

html

1<div class="radio-button"> 2 <input type="radio" name="radio01" id="radio01-t" value="0"><label for="radio01-t">ON</label> 3 <input type="radio" name="radio01" id="radio01-f" value="1" checked><label for="radio01-f">OFF</label> 4</div>

css

1.radio-button { 2 width: 100px; 3 background-color: #eee; 4 border-radius: 28px; 5 display: inline-table; 6 box-shadow: 1px 1px 5px 0px inset; 7 padding:3px; 8 text-align: center; 9 font-family: Lucida Console; 10} 11 12/* 13 * ラジオボタンを非表示化 14 */ 15.radio-button input[type=radio] { 16 display: none; 17} 18 19.radio-button input[type=radio] + label { 20 display: inline-block; 21 float: left; 22 padding: 10px; 23 border-radius: 20px; 24 width:29px; 25 height:16px; 26 cursor: pointer; /* マウスポインターが指の形に変化するよう、追加 */ 27 28 /* 29 * ダブルクリックした時に文字列を選択しないようにするためのプロパティ 30 */ 31 -moz-user-select: none; 32 -ms-user-select: none; 33 -webkit-user-select: none; 34} 35 36/* 37 * チェックされたラジオボタンに対応するlabel要素に色を付ける 38 */ 39.radio-button input[type=radio]:checked + label { 40 background-color: #9f9; 41 box-shadow: 1px 1px 1px 1px; 42} 43

動作サンプル

投稿2016/06/21 14:53

sounisi5011

総合スコア697

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

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

0

ベストアンサー

こんにちは

javascriptのコード量減らすなら

css

1.radio { 2 width: 100px; 3 background-color: #eee; 4 border-radius: 28px; 5 display: inline-table; 6 box-shadow: 1px 1px 5px 0px inset; 7 padding:3px; 8 text-align: center; 9 font-family: Lucida Console; 10} 11.btn { 12 display: inline-block; 13 float: right; 14 background-color: #eee; 15 border-radius: 20px; 16 padding: 10px; 17 width:29px; 18 height:16px; 19 cursor: pointer; 20} 21.active{ 22 background-color:#9f9; 23 box-shadow:1px 1px 1px 1px; 24}

html

1<div class="radio" name="radio" onclick="radio()"> 2 <div class="on btn" name="on">ON</div> 3 <div class="off btn active" name="off">OFF</div> 4</div>

javascript

1var vary = 0; 2var off = document.getElementsByClassName("off")[0]; 3var on = document.getElementsByClassName("on")[0]; 4function radio() { 5 if(vary==0){ 6 off.classList.remove("active"); 7 on.classList.add("active"); 8 vary = 1; 9 }else{ 10 off.classList.add("active"); 11 on.classList.remove("active"); 12 vary = 0; 13 } 14}

jqueryもいい子なので使ってあげてもらえたらうれしいです!

投稿2016/06/21 14:43

kogure

総合スコア299

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

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

0

これ、スクリプトを見る限り一つのページに複数入れたらうまく動かないんじゃないですか?

投稿2016/06/21 11:25

Zuishin

総合スコア28656

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

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

0

ラジオボタン風ですがラジオボタンをつかわないでもよいのですか?
実際submitしてもデータが遷移しませんが
値が保持されないのでグローバルでvaryを持たないといけないみたいですし

それと効率だけで言えばclassでon,offしていするよりid振ったほうがよいかも

投稿2016/06/21 11:23

yambejp

総合スコア114581

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問