ラジオボタンがラジオボタンとして機能しない

Question

liやspanなどで囲ってみてもラジオボタンとしての動作ではなく１個目を選択し２個めを選択すると１個めのチェックが解除されると思うのですが入りっぱなしになる状態です。
見た目としてはラジオボタンなのですが実際は挙動が異なってしまいます。

またもう一つ動作を追加したいと思っているのでそちらも教えていただきたいです。
途中まではあっているとは思うのですが「:checked」に対しての指定がうまくいっていないか機能していないようなんです。

<div class="no1"><label for="no1-1"><input type="radio"  id="no1-1">hover1</label></div>
<div class="no2"><label for="no2-1"><input type="radio"  id="no2-1">hover2</label></div>
<div class="no3"><label for="no3-1"><input type="radio"  id="no3-1">hover2</label></div>
<div class="no4"><label for="no4-1"><input type="radio"  id="no4-1">hover2</label></div>
<div class="no5"><label for="no5-1"><input type="radio"  id="no5-1">hover2</label></div>
<div class="no6"><label for="no6-1"><input type="radio"  id="no6-1">hover2</label></div>

<!--↓背景を設定するのに利用している部分です-->
    <div class="wrapper">
        <div class="contents">

        </div>
    </div>
<!--↑背景を設定するのに利用している部分です-->

<div class="noA">
<h1>sample</h1>
<p>sample<br>sample</p>
</div>

/*切り替わる画像サイズと表示場所の指定、
今回はhtmlファイルカラのDIVで囲った空のとこに対して出す*/
.wrapper {
    width: 100%;
    height: 100%;
}
.contents {
    height: 100vh;
    background-image: url(img/1-1920-1080.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    /*margin-top: -300px;/*ボタン一個追加ごとに50px上乗せヘッダー下部に不要なスペースできるためつぶすために必要*/
}

/*指定のラジオボタンをホバーすると切り替わる予定の画像設定と動作*/
.no1:hover ~ .wrapper .contents {
    background-image: url(img/541.png);
}
.no2:hover ~ .wrapper .contents {
    background-image: url(img/3-1920-1080.jpg);
}
.no3:hover ~ .wrapper .contents {
    background-image: url(img/2-1920-1080.jpg);
}

/*ボタン押すまで消えてる文章の表示場所や消す設定*/

.noA h1 {text-align: center;}

/*-700はHTMLのラジオボタンの数が増えるとHP表示の際に
上部に空白ができてしまうために数値が大きいです*/
.noA {width: 600px; height: 100px;
      font-weight: bold;
      color: red;
     position: relative;
		 top:-700px;
		 left: 30%
	 }


/*ラジオボタンにチェックが入るまで非表示にする*/
.noA {display: none;}
/*
指定のラジオボタンにチェックが入ったら下記に指定した画像が背景画像に切り替わり、
非表示にしていた.noAの文字が出るようになる
*/
.no1 input[type="radio"]:checked + label ~ .wrapper .contents{
  background-image: url(img/at.png);
}

/*.no2のボタン.no3のボタンと続きます*/

前提・実現したいこと

1.ラジオボタンが通常のラジオボタンの選択するように常に１個しか選択できないようにしたい。

2.指定のラジオボタンが選択された場合に下記に指定した場所に画像のみ入れ替わって表示されるようにしたい
（表示された場合別のラジオボタンがされた場合はそちらに指定した画像に代わるように動作させたい）
.contents {
height: 100vh;
background-image: url(img/1-1920-1080.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;｝

Comments

[yukikp]

name属性がどこにもないよ〜

Answer 1

HTML5だと同じnameでもform属性で別々のグルーピングができます

<form id="1"></form>
<form id="2"></form>
<div class="no1"><label><input type="radio" name="hoge" form="1">hover1</label></div>
<div class="no2"><label><input type="radio" name="hoge" form="1">hover1</label></div>
<div class="no3"><label><input type="radio" name="hoge" form="1">hover1</label></div>
<div class="no4"><label><input type="radio" name="hoge" form="2">hover2</label></div>
<div class="no5"><label><input type="radio" name="hoge" form="2">hover2</label></div>
<div class="no6"><label><input type="radio" name="hoge" form="2">hover2</label></div>

Comments

[yukikp]

へーへーへー！ｘ１０

Answer 2

name属性を同名で付けることによりグループ化されます。

何かしらで送信する場合などはvalue属性の情報を拾うので、valueも設定しておいたほうが良いでしょう

<input type="radio" name="test1" value="1">1
<input type="radio" name="test1" value="2">2
<input type="radio" name="test1" value="3">3

<input type="radio" name="test2" value="1">1
<input type="radio" name="test2" value="2">2
<input type="radio" name="test2" value="3">3

Answer 3

liやspanなどで囲ってみてもラジオボタンとしての動作ではなく１個目を選択し２個めを選択すると１個めのチェックが解除されると思うのですが入りっぱなしになる状態です。

<input type="radio">に同じnameを指定してください。nameで連動します。

指定のラジオボタンが選択された場合に下記に指定した場所に画像のみ入れ替わって表示されるようにしたい

今のところ、:checkedで拾って変動させられる範囲が、兄弟要素とその子孫に限られますので、このHTML構造ではCSSだけで実現できません。JavaScriptでの書き直しが必要です。

Answer 4

form で くくって 同じ name をつけなくちゃね。

参考 <INPUT type="radio"> …… ラジオボタンを作成する

Answer 5

ご自身の時間を割いて解答してくださった皆様ありがとうございました。