【问题标题】：Use Images instead of radio button and get the checked value and pass it to a h2 tag使用图像而不是单选按钮并获取选中的值并将其传递给 h2 标签
【发布时间】：2017-03-10 01:24:33
【问题描述】：
我正在使用图像来显示单选按钮，但在获取检查值并将其传递给标签时遇到了麻烦。我可以单击图像并将单选按钮设置为选中，但如果我单击任何其他图像，此图像单选按钮也会被选中，所以现在我选中了 2 个单选按钮，我只想要一个选择了图像的单选按钮和将该值传递给 h2 标签。这是显示演示的 jfiddle 链接
jFiddle Demo
$('#thumbnails1').delegate('img','click', function(){
$(this).prev().attr('checked',true);
});
ul{list-style:none;margin:0;padding:0}
ul.swatch-colors li{float:left;margin:5px;padding:0;width:32px;height:32px}.swatch-colors li .swatch-img{cursor:pointer;display:block}
label.lbswatches > input{visibility:hidden;position: absolute;}
label.lbswatches > input + img{cursor:pointer;border:2px solid transparent;}
label.lbswatches > input:checked + img{border:2px solid #f00;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="thumbnails1" class="noul swatch-colors">
<li><label class="lbswatches"><input name="swatch_color" value="Cherry Red" type="radio"><img src="https://dummyimage.com/32/ff0000/fff" class="full swatch-img" alt="Cherry Red" title="Cherry Red" width="32" height="32"></label></li>
<li><label class="lbswatches"><input name="swatch_color" value="Irish Green" type="radio"><img src="https://dummyimage.com/32/2fff00/fff" class="full swatch-img" alt="Irish Green" title="Irish Green" width="32" height="32"></label></li>
<li><label class="lbswatches"><input name="swatch_color" value="Jade Dome" type="radio"><img src="https://dummyimage.com/32/1e7d07/1e7d07" class="full swatch-img" alt="Jade Dome" title="Jade Dome" width="32" height="32"></label></li>
<li><label class="lbswatches"><input name="swatch_color" value="Orange" type="radio"><img src="https://dummyimage.com/32/e69410/e69410" class="full swatch-img" alt="Orange" title="Orange" width="32" height="32"></label></li>
</ul>
<h2 id="colorselected"></h2>
感谢并感谢它
【问题讨论】：
标签：
javascript
jquery
html
css
【解决方案1】：
将此添加到您的 Javascript 点击事件中：
$("#colorselected").text($(this).attr("alt"));
这只是使用您单击的最后一张图片中的替代文本更新 h2 中的文本。你想要的对吗？
也可能值得取消选中之前的复选框。
【解决方案2】：
将.radio01 之类的类添加到无线电输入中。
$('#thumbnails1').delegate('img','click', function(){
$(this).closest('ul').find('.radio01').attr('checked',false);
$(this).prev().attr('checked',true);
});
编辑：这行得通！
【解决方案3】：
简单的解决方案。将 <ul> 包裹在 <form> 元素中。
$('#thumbnails1').delegate('img','click', function(){
$(this).prev().attr('checked',true);
});
ul{list-style:none;margin:0;padding:0}
ul.swatch-colors li {
float:left;
margin:5px;
padding:0;
width:32px;
height:32px
}
.swatch-colors li .swatch-img{cursor:pointer;display:block}
label.lbswatches > input{visibility:hidden;position: absolute;}
label.lbswatches > input + img{cursor:pointer;border:2px solid transparent;}
label.lbswatches > input:checked + img{border:2px solid #f00;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
<ul id="thumbnails1" class="noul swatch-colors">
<li><label class="lbswatches"><input name="swatch_color" value="Cherry Red" type="radio"><img src="https://dummyimage.com/32/ff0000/fff" class="full swatch-img" alt="Cherry Red" title="Cherry Red" width="32" height="32"></label></li>
<li><label class="lbswatches"><input name="swatch_color" value="Irish Green" type="radio"><img src="https://dummyimage.com/32/2fff00/fff" class="full swatch-img" alt="Irish Green" title="Irish Green" width="32" height="32"></label></li>
<li><label class="lbswatches"><input name="swatch_color" value="Jade Dome" type="radio"><img src="https://dummyimage.com/32/1e7d07/1e7d07" class="full swatch-img" alt="Jade Dome" title="Jade Dome" width="32" height="32"></label></li>
<li><label class="lbswatches"><input name="swatch_color" value="Orange" type="radio"><img src="https://dummyimage.com/32/e69410/e69410" class="full swatch-img" alt="Orange" title="Orange" width="32" height="32"></label></li>
</ul>
</form>
<h2 id="colorselected"></h2>