前两个checkbox改成单选,第三个保持不变,js换图效果不变
试过改成radio但是这样导致后面无法切换图了
<form id="option-lapmoni" class="slidebox-right">
<div class="optionrow columngz">
<div class="optionbox shubox">
<input type="checkbox" name="yon" id="lightyon" class="optioninput"
value="light" onclick="set2Src()">
<div class="productbox">
<p class="productbox-p1"></p>
<p class="productbox-p2">Ring Light</p>
<p class="productbox-p3"></p>
</div>
</div>
<div class="optionbox shubox">
<input type="checkbox" name="yon" id="tabletyon" class="optioninput"
value="tablet" onclick="set2Src()">
<div class="productbox">
<p class="productbox-p1"></p>
<p class="productbox-p2">Tablet Holder</p>
<p class="productbox-p3"></p>
</div>
</div>
<div class="optionbox shubox">
<input type="checkbox" name="yon" id="microyon" class="optioninput"
value="micro" onclick="set2Src()">
<div class="productbox">
<p class="productbox-p1"></p>
<p class="productbox-p2">Microphone Mount</p>
<p class="productbox-p3"></p>
</div>
</div>
</div>
<div class="step1btbox">
<botton id="step2-back" class="custombtn2">back</botton>
<botton id="step2-next" class="custombtn" onclick="step2next()">NEXT</botton>
</div>
</form>
<script>
var kv2ImgSrc = {
light: '',
tablet: '',
micro: '',
lighttablet: '',
lighttabletmicro:'',
lightmicro: '',
tabletmicro: '',
'':''
}
function set2Src() {
var key = $('#option-lapmoni :checkbox:checked').map(function () { return this.value }).get().join('');
$('#lapmoni-img').attr("src", kv2ImgSrc[key]);
var step2option1 = $("input[id='lightyon']:checked").val();
var step2option2 = $("input[id='tabletyon']:checked").val();
var step2option3 = $("input[id='microyon']:checked").val();
$('#product-light')[step2option1 == "light" ? 'show' : 'hide']();
$('#product-pad')[step2option2 == "tablet" ? 'show' : 'hide']();
$('#product-micro')[step2option3 == "micro" ? 'show' : 'hide']();
return false;
}
</script>