clickable images in javascript, который должен быть взаимным эксклюзивным

Question

Я разрабатываю веб-страницу, которая должна содержать интерактивные изображения (4), которые должны быть взаимоисключающими, и если ни один не выбран, мы должны сгенерировать сообщение об ошибке. Радиобуты и флажки не должны использоваться

Answer 1

Вы можете видеть, что есть радиокнопки, но они скрыты.

$('form').submit(function(e) { 
 
    e.preventDefault(); 
 
    var selected = $(this).find(':checked'); 
 
    if (selected.length == 0) { 
 
    alert('select image'); 
 
    } 
 
    else { 
 
    alert(selected.map(function() { 
 
    return $(this).val(); 
 
    }).get().join() + ' selected'); 
 
    } 
 
});

li { 
 
    list-style:none; 
 
} 
 

 
input { 
 
    display:none; 
 
} 
 

 
img { 
 
    cursor:pointer; 
 
} 
 

 
label { 
 
    display:inline-block; 
 
} 
 

 
input:checked + label { 
 
    border:1px solid gray; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form action="your_action"> 
 
<ul> 
 
    <li> 
 
    <input id="option1" type="checkbox" name="options[]" value="1" /> 
 
    <label for="option1"> 
 
     <img width="213" height="99" title="" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANUAAABjCAIAAACDsdK8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAMSSURBVHhe7dXtkqQgDIXhuf+b7k0ra1l+YCLRY8v7/NpxQoBwavbvA+iQPyiRPyiRPyiRPyiRPyiRPyiRPyiRPyiRPyiRPyiRPyiRPyiRPygd5O+vQWkB7DvOX/kXcAHiBaVY/vhziFzkD0rkD0rkD0rkD0rhPBFBJCJ/UCJ/ULojf7ZkUj4Bg1v//pE/LNyaP3NzBG27TeXXGUrHfaUOW16bv+Hpd/dKPMZhq+EgRfmE/8ITaRziDW8wPPTxLlknCfXJ2vQ1wuNon+DpDrZwrnxdqfxqzll2KNQna9PXCI+jfYLnOqxXbX5Zf6wIFe/xNxlOl7Djm4THkTLBUJPh1TbqFx/3yupOLFlo79AzwYOZUJO94vn306dqv070LpPyqW/hKaQMzt+kXjn99vSp2q9z+i72o3/tW4XvnzIyZ5PDsqmg5VSNN/IvX1c2bv0C4funjOywiRV4NhprPJUVty3frGzc/deFL58yr8Mmzl2szFlZ0djBv3yv8nuH5lv8qPC1UyZ12MS5y/fdms/T2MG/vF7ZfpFfFL5zypiyXiLrzVr6ZJ026y6/JXznq5881P/qw3j41x5WZl3nh4QvfOmTR5tfehgnWztXvq5UfjXx1LzMmQunjGmzieoBsva1PhWlaJ+n5mXOXDhlTOsmwuk/5OHJn8sV+dOO3nbXHmDykGPcpnbb8VVCykqHRXFo7RXkBxg95Bi3Ud52Puve5l7R1SgekT/CN0f+bmKDHpWfMehqILz945A/KJE/KJE/KJE/KJE/KJE/KJE/KJE/KJE/KJE/KJE/KJE/KJE/yHQVPkP+noX8QYn8Qaa38Bny9xQdhs+Qv6cgf5DpM3yG/Ol1Gz5D/sR6Dp8hf0qdh8+QPxnCZxiBgCWP8I2Ywq1I3gKzuAnJ28RELkfyKpjLVcbYmfIztjCdfMTOjzElI3khDCvB+AdvVD7Bh3m1InMtmN1SKE+ErxHjW/r+J+pW1uAsJggl8gcl8gcl8gcl8gcl8gcl8gcl8gcl8gcl8gcl8gcl8gcl8gcl8gcl8gedz+cf5kSbrmlGP5UAAAAASUVORK5CYII=" /> 
 
    </label> 
 
    </li> 
 
    <li> 
 
     <input id="option2" type="checkbox" name="options[]" value="2" /> 
 
    <label for="option2"> 
 
     <img width="213" height="99" title="" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANUAAABjCAIAAACDsdK8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAMSSURBVHhe7dXtkqQgDIXhuf+b7k0ra1l+YCLRY8v7/NpxQoBwavbvA+iQPyiRPyiRPyiRPyiRPyiRPyiRPyiRPyiRPyiRPyiRPyiRPyiRPygd5O+vQWkB7DvOX/kXcAHiBaVY/vhziFzkD0rkD0rkD0rkD0rhPBFBJCJ/UCJ/ULojf7ZkUj4Bg1v//pE/LNyaP3NzBG27TeXXGUrHfaUOW16bv+Hpd/dKPMZhq+EgRfmE/8ITaRziDW8wPPTxLlknCfXJ2vQ1wuNon+DpDrZwrnxdqfxqzll2KNQna9PXCI+jfYLnOqxXbX5Zf6wIFe/xNxlOl7Djm4THkTLBUJPh1TbqFx/3yupOLFlo79AzwYOZUJO94vn306dqv070LpPyqW/hKaQMzt+kXjn99vSp2q9z+i72o3/tW4XvnzIyZ5PDsqmg5VSNN/IvX1c2bv0C4funjOywiRV4NhprPJUVty3frGzc/deFL58yr8Mmzl2szFlZ0djBv3yv8nuH5lv8qPC1UyZ12MS5y/fdms/T2MG/vF7ZfpFfFL5zypiyXiLrzVr6ZJ026y6/JXznq5881P/qw3j41x5WZl3nh4QvfOmTR5tfehgnWztXvq5UfjXx1LzMmQunjGmzieoBsva1PhWlaJ+n5mXOXDhlTOsmwuk/5OHJn8sV+dOO3nbXHmDykGPcpnbb8VVCykqHRXFo7RXkBxg95Bi3Ud52Puve5l7R1SgekT/CN0f+bmKDHpWfMehqILz945A/KJE/KJE/KJE/KJE/KJE/KJE/KJE/KJE/KJE/KJE/KJE/KJE/yHQVPkP+noX8QYn8Qaa38Bny9xQdhs+Qv6cgf5DpM3yG/Ol1Gz5D/sR6Dp8hf0qdh8+QPxnCZxiBgCWP8I2Ywq1I3gKzuAnJ28RELkfyKpjLVcbYmfIztjCdfMTOjzElI3khDCvB+AdvVD7Bh3m1InMtmN1SKE+ErxHjW/r+J+pW1uAsJggl8gcl8gcl8gcl8gcl8gcl8gcl8gcl8gcl8gcl8gcl8gcl8gcl8gcl8gedz+cf5kSbrmlGP5UAAAAASUVORK5CYII=" /> 
 
    </label> 
 
    </li> 
 
    <li> 
 
     <input id="option3" type="checkbox" name="options[]" value="3" /> 
 
    <label for="option3"> 
 
     <img width="213" height="99" title="" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANUAAABjCAIAAACDsdK8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAMSSURBVHhe7dXtkqQgDIXhuf+b7k0ra1l+YCLRY8v7/NpxQoBwavbvA+iQPyiRPyiRPyiRPyiRPyiRPyiRPyiRPyiRPyiRPyiRPyiRPyiRPygd5O+vQWkB7DvOX/kXcAHiBaVY/vhziFzkD0rkD0rkD0rkD0rhPBFBJCJ/UCJ/ULojf7ZkUj4Bg1v//pE/LNyaP3NzBG27TeXXGUrHfaUOW16bv+Hpd/dKPMZhq+EgRfmE/8ITaRziDW8wPPTxLlknCfXJ2vQ1wuNon+DpDrZwrnxdqfxqzll2KNQna9PXCI+jfYLnOqxXbX5Zf6wIFe/xNxlOl7Djm4THkTLBUJPh1TbqFx/3yupOLFlo79AzwYOZUJO94vn306dqv070LpPyqW/hKaQMzt+kXjn99vSp2q9z+i72o3/tW4XvnzIyZ5PDsqmg5VSNN/IvX1c2bv0C4funjOywiRV4NhprPJUVty3frGzc/deFL58yr8Mmzl2szFlZ0djBv3yv8nuH5lv8qPC1UyZ12MS5y/fdms/T2MG/vF7ZfpFfFL5zypiyXiLrzVr6ZJ026y6/JXznq5881P/qw3j41x5WZl3nh4QvfOmTR5tfehgnWztXvq5UfjXx1LzMmQunjGmzieoBsva1PhWlaJ+n5mXOXDhlTOsmwuk/5OHJn8sV+dOO3nbXHmDykGPcpnbb8VVCykqHRXFo7RXkBxg95Bi3Ud52Puve5l7R1SgekT/CN0f+bmKDHpWfMehqILz945A/KJE/KJE/KJE/KJE/KJE/KJE/KJE/KJE/KJE/KJE/KJE/KJE/yHQVPkP+noX8QYn8Qaa38Bny9xQdhs+Qv6cgf5DpM3yG/Ol1Gz5D/sR6Dp8hf0qdh8+QPxnCZxiBgCWP8I2Ywq1I3gKzuAnJ28RELkfyKpjLVcbYmfIztjCdfMTOjzElI3khDCvB+AdvVD7Bh3m1InMtmN1SKE+ErxHjW/r+J+pW1uAsJggl8gcl8gcl8gcl8gcl8gcl8gcl8gcl8gcl8gcl8gcl8gcl8gcl8gcl8gedz+cf5kSbrmlGP5UAAAAASUVORK5CYII=" /> 
 
    </label> 
 
    </li> 
 
    <li> 
 
    <input id="option4" type="checkbox" name="options[]" value="4" /> 
 
    <label for="option4"> 
 
     <img width="213" height="99" title="" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANUAAABjCAIAAACDsdK8AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAMSSURBVHhe7dXtkqQgDIXhuf+b7k0ra1l+YCLRY8v7/NpxQoBwavbvA+iQPyiRPyiRPyiRPyiRPyiRPyiRPyiRPyiRPyiRPyiRPyiRPyiRPygd5O+vQWkB7DvOX/kXcAHiBaVY/vhziFzkD0rkD0rkD0rkD0rhPBFBJCJ/UCJ/ULojf7ZkUj4Bg1v//pE/LNyaP3NzBG27TeXXGUrHfaUOW16bv+Hpd/dKPMZhq+EgRfmE/8ITaRziDW8wPPTxLlknCfXJ2vQ1wuNon+DpDrZwrnxdqfxqzll2KNQna9PXCI+jfYLnOqxXbX5Zf6wIFe/xNxlOl7Djm4THkTLBUJPh1TbqFx/3yupOLFlo79AzwYOZUJO94vn306dqv070LpPyqW/hKaQMzt+kXjn99vSp2q9z+i72o3/tW4XvnzIyZ5PDsqmg5VSNN/IvX1c2bv0C4funjOywiRV4NhprPJUVty3frGzc/deFL58yr8Mmzl2szFlZ0djBv3yv8nuH5lv8qPC1UyZ12MS5y/fdms/T2MG/vF7ZfpFfFL5zypiyXiLrzVr6ZJ026y6/JXznq5881P/qw3j41x5WZl3nh4QvfOmTR5tfehgnWztXvq5UfjXx1LzMmQunjGmzieoBsva1PhWlaJ+n5mXOXDhlTOsmwuk/5OHJn8sV+dOO3nbXHmDykGPcpnbb8VVCykqHRXFo7RXkBxg95Bi3Ud52Puve5l7R1SgekT/CN0f+bmKDHpWfMehqILz945A/KJE/KJE/KJE/KJE/KJE/KJE/KJE/KJE/KJE/KJE/KJE/KJE/yHQVPkP+noX8QYn8Qaa38Bny9xQdhs+Qv6cgf5DpM3yG/Ol1Gz5D/sR6Dp8hf0qdh8+QPxnCZxiBgCWP8I2Ywq1I3gKzuAnJ28RELkfyKpjLVcbYmfIztjCdfMTOjzElI3khDCvB+AdvVD7Bh3m1InMtmN1SKE+ErxHjW/r+J+pW1uAsJggl8gcl8gcl8gcl8gcl8gcl8gcl8gcl8gcl8gcl8gcl8gcl8gcl8gcl8gedz+cf5kSbrmlGP5UAAAAASUVORK5CYII=" /> 
 
    </label> 
 
    </li> 
 
</ul> 
 
    <button>Submit</button> 
 
</form>