Question

我正在设计一个网页，其中应该包含一个可互相排斥的可点击图片（4），如果没有选中，我们应该生成错误信息Radiobuttons和复选框不应该使用

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>

javascript中的可点击图片应该是互斥的

1 个答案: