61120


**現在の状況**

  1. 複数の画像を表示し、それらをラジオボタンとして機能させています。
  2. ラジオボタン自体の`<input type='radio'>`は`{display: none;}`で非表示にして、`<ravel>`で囲まれた画像がボタンとして機能しています。
  3. 現在クリックしても、ユーザー視点でクリックしたかが分からない。

**実装したいこと**

  1. 画像が選択された際に選択状況が分かるように、選択された画像が半透明になるような動きを実現したい。
  2. ラジオボタンのため、別の画像をクリックし直した際はその他は通常表示に戻したい。

PHP、laravel初学者で、アプリを作成しておりますが、この実装ができません。  
今の所JavaScriptを用いて実装したいことの1は実現できそうなのですが、2で行うための記述がわかりません。  
どなたかご教授いただけますと幸いです。

**HTML**

[code]

    <div class='select_seed'>
      <h1>型犬の中から選ぶ</h1>
        <ul>  
          <label><li><input type='radio' name='seed'  value='1'>
          <img class='photo' src="{{ asset('/assets/images/smooth-chihuahua.jpg') }}" alt='スムースコートチワワ'><p>スムースコートチワワ</p></li></label>
          <label><li><input type='radio' name='seed'  value='2'>
          <img class='photo' src="{{ asset('/assets/images/chihuahua.jpg') }}" alt='チワワ'><p>チワワ</p></li></label>
          <label><li><input type='radio' name='seed'  value='3'>
          <img class='photo' src="{{ asset('/assets/images/tea-poodle.jpg') }}" alt='ティーカッププードル'><p>ティーカッププードル</p></li></label>
          <label><li><input type='radio' name='seed'  value='4'>
          <img class='photo' src="{{ asset('/assets/images/toy-poodle.jpg') }}" alt='トイプードル'><p>トイプードル</p></li></label>
          <label><li><input type='radio' name='seed'  value='5'>
          <img class='photo' src="{{ asset('/assets/images/man-terrier.jpg') }}" alt='トイマンチェスターテリア'><p>トイマンチェスターテリア</p></li></label>
        </ul>
        <ul>
        <label><li><input type='radio' name='seed'  value='6'>
          <img class='photo' src="{{ asset('/assets/images/papillon.jpg') }}" alt='パピヨン'><p>パピヨン</p></li></label>
          <label><li><input type='radio' name='seed'  value='7'>
          <img class='photo' src="{{ asset('/assets/images/pomeranian.jpg') }}" alt='ポメラニアン'><p>ポメラニアン</p></li></label>
          <label><li><input type='radio' name='seed'  value='8'>
          <img class='photo' src="{{ asset('/assets/images/mameshiba.jpg') }}" alt='豆柴'><p>豆柴</p></li></label>
          <label><li><input type='radio' name='seed'  value='9'>
          <img class='photo' src="{{ asset('/assets/images/maltese.jpg') }}" alt='マルチーズ'><p>マルチーズ</p></li></label>
          <label><li><input type='radio' name='seed'  value='10'>
          <img class='photo' src="{{ asset('/assets/images/y-terrier.jpg') }}" alt='ヨークシャーテリア' ><p>ヨークシャーテリア</p></li></label>
        </ul>
        <div>
        </div>
    </div>
    
[/code]

[![\]\[1\]](https://i.stack.imgur.com/dNfUl.jpg)](https://i.stack.imgur.com/dNfUl.jpg)


CC BY-SA 4.0
2019-12-05T01:30:52.350
61117
2019-12-05T04:58:08.477
2019-12-05T04:58:08.477
2238
36914
question
javascript php html css laravel
ラジオボタンの選択状況の可視化について


私が現在使用しているコードを上のコードみたいに当てはめて変えてみました  
ただ画像をアップロードしてスニペットで使う方法が分からなかったので全て文字になっていますが  
そこを`<img>`に変更していただければ使用できると思います

ただその際にCSSのサイズなどの変更、色の変化などはしないといけないでしょうけども

この様なコードになりました、参考になると思います

[code]

    ul {
      list-style: none;
    }
    
    .nordio {
      display: none;
    }
    
    .pad {
      width: 10%;
      margin: 0 4em 0 0;
    }
    
    .coolrdio {
      width: 150%;
      margin: 0.7em;
      padding-top: 0.2em;
      border: 1px #aaf3ed solid;
      background-color: #fff;
      color: #000;
    }
    
    .coolrdio:hover {
      background: #47e4d7;
    }
    
    input[type="radio"]:checked+label {
      background-color: #5555ff;
    }
    
    .seach-input {
      margin: 5px 5px 5px 0;
    }
    
    .seach-label {
      margin: 5px 0;
    }
    
    .selectbox {
      width: 25%;
      height: 50%;
    }
    
    .selectlabel {
      width: 20%;
    }
[/code]

[code]

    <label class="inputlabel">犬を選んでください</label>
    <ul>
      <li>
        <div class="pad">
          <input id="test1" name="dog" type="radio" class="selectbox nordio" value="1" checked="" required="">
          <label class="selectlabel coolrdio" for="test1">犬</label>
        </div>
      </li>
      <li>
        <div class="pad">
          <input id="test2" name="dog" type="radio" class="selectbox nordio" value="2" required="">
          <label class="selectlabel coolrdio" for="test2">犬</label>
        </div>
      </li>
       <li>
        <div class="pad">
          <input id="test3" name="dog" type="radio" class="selectbox nordio" value="3" required="">
          <label class="selectlabel coolrdio" for="test3">犬</label>
        </div>
      </li>
       <li>
        <div class="pad">
          <input id="test4" name="dog" type="radio" class="selectbox nordio" value="4" required="">
          <label class="selectlabel coolrdio" for="test4">犬</label>
        </div>
      </li>
       <li>
        <div class="pad">
          <input id="test5" name="dog" type="radio" class="selectbox nordio" value="5" required="">
          <label class="selectlabel coolrdio" for="test5">犬</label>
        </div>
      </li>
    </ul>
[/code]


CC BY-SA 4.0
2019-12-05T02:45:28.850
61120
2019-12-05T02:45:28.850
35461
61117
answer