formの選択をプルダウン以外で作成したい。

formでInput画面を作っています。
selectのタグを使うとプルダウンになりますね。
これを、例えば↓のように４つの文字列のどれかをクリックすることによりそこが選択されるように、出来る方法があれば教えて頂きたいです。

AAA BBB CCC DDD

よろしくお願い致します。

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

回答2件

ベストアンサー

HTML, CSSのみで行うならば以下のように行うことが可能です。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        input[name="radiobutton"] {
8            display: none;
9        }
10
11        input[name="radiobutton"]:checked + label {
12            background-color: #ff0000;
13        }
14    </style>
15</head>
16<body>
17<form>
18    <input type="radio" name="radiobutton" id="radio1" value="AAA">
19    <label for="radio1">AAA</label>
20
21    <input type="radio" name="radiobutton" id="radio2" value="BBB">
22    <label for="radio2">BBB</label>
23
24    <input type="radio" name="radiobutton" id="radio3" value="CCC">
25    <label for="radio3">CCC</label>
26
27    <input type="radio" name="radiobutton" id="radio4" value="DDD">
28    <label for="radio4">DDD</label>
29</form>
30</body>
31</html>

投稿2017/07/16 13:00

s8_chu

総合スコア14731

zohnam

2017/07/16 13:05

うーん、素晴らしい javascriptタグもjQueryタグもついてない質問にjQueryでの回答をしてしまった自分が恥ずかしい

kk0125

2017/07/16 23:41

色々、ありがとうございます。radio ボタンを使わない方法で実施したいと思っています。先に教えて頂いた方法で、formのname,valueまで、入れたコードになりますと、どんなな内容になりますでしょうか？ついつい甘えてしまい大変申し訳ありません。ヒントでもいただければ大変幸いです。よろしくお願い致します。

s8_chu

2017/07/16 23:48 編集

radioボタンを使わない方法となると、javascriptを使用することになりますが良いですか？

think49

2017/07/17 00:16

> radio ボタンを使わない方法で実施したいと思っています。 HTML/CSSで完結する方が役割的に好ましいと思いますが、なぜradioボタンを使わないのでしょうか。

kk0125

2017/07/18 02:39

すみません。機能的にはradioボタンで良いのですが、デザインの関係です。申し訳ありません。

kk0125

2017/07/18 02:41

javascriptを使用しての実現で問題ありません。大変甘えて申し訳ありません。よろしくお願い致します。

zohnam

2017/07/18 02:53

なにか勘違いされているようですが、s8_chuさんのこの回答は、デフォルトのラジオボタンは表示されませんよ。機能するためだけに存在はしていますが、ラジオボタンそのものは常に非表示です。見た目はlabelタグしかありません。

kk0125

2017/07/18 03:36

すみません。確認いたします。

kk0125

2017/07/18 03:41

皆様、大変ありがとうございます。確認できました。実装できそうです。 s8_chu様、ありがとうございました

think49

2017/07/18 04:14

このコードの問題をあえて挙げるとするなら、CSSが無効化された環境でradioボタンが表出してしまう事です。表出してもラジオボタンとしての機能を期待するなら問題はないのですが、CSS有効化されていないと他の機能と整合性が取れない場合に問題になります。「使えもしないラジオボタンが現われてしまい、ユーザを混乱させるだけの無駄なラジオボタンになってしまう」というわけです。 JavaScriptではこれを「OFF環境に優しく」や「出しゃばらないJavaScript」と呼ばれます。 CSS Offまで配慮している人がどこまでいるかは分かりませんが、心に留めておくと良いかもしれません。

kk0125

2017/07/18 05:51

了解致しました。ありがとうございます。

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

html
1<span class='sel'>AAA</span>
2<span class='sel'>BBB</span>
3<span class='sel'>CCC</span>
4<span class='sel'>DDD</span>

css
1/**/
2.sel{
3/* 未選択状態ボタンのように見せるCSS記述 */
4}
5.sel.selected{
6/* 選択状態ボタンのように見せるCSS記述 */
7}
8

javascript
1$(function(){
2	$(".sel").click(function(){
3		$(".sel").removeClass("selected");// いったんすべてを未選択状態にして…
4		$(this).addClass("selected");// 押されたものを、選択状態にする
5	}
6});