現在の状況
- 複数の画像を表示し、それらをラジオボタンとして機能させています。
- ラジオボタン自体の
<input type='radio'>
は{display: none;}
で非表示にして、<ravel>
で囲まれた画像がボタンとして機能しています。 - 現在クリックしても、ユーザー視点でクリックしたかが分からない。
実装したいこと
- 画像が選択された際に選択状況が分かるように、選択された画像が半透明になるような動きを実現したい。
- ラジオボタンのため、別の画像をクリックし直した際はその他は通常表示に戻したい。
PHP、laravel初学者で、アプリを作成しておりますが、この実装ができません。
今の所JavaScriptを用いて実装したいことの1は実現できそうなのですが、2で行うための記述がわかりません。
どなたかご教授いただけますと幸いです。
HTML
<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>