Question

为什么如果我在图像上放置超链接以前的解决方案不起作用？ “我有一组三个单选按钮连接一组三个图像 - 即{image1，radioBtn1}，{image2，radioBtn2}，{image3，radioBtn3}。

我正在尝试执行以下操作：当我点击一个图像时，自动检查连接到该图像的单选按钮（例如：当我点击图像3时，将检查radioBtn3）“

Answer 1

为每个图像添加事件侦听器，告知要检查相应的按钮。

Answer 2

使用label元素对广播input和img进行分组：

<label>
    <input type="radio" name="mode" value="create" />
    <img src="your_image.jpg" />
</label>

Answer 3

这是一个简单的例子...... FIDDLE

<section>
  <img src="/" class="radio-img" alt="Image 1">
  <img src="/" class="radio-img" alt="Image 2">
  <img src="/" class="radio-img" alt="Image 3">

  <input type="radio" name="radio">
  <input type="radio" name="radio">
  <input type="radio" name="radio">
</section>

$('.radio-img').click(function() {
  $('input[name="radio"]').eq($(this).index()).trigger('click');
});

...但当然，你必须使用jQuery。

要在文档中包含jQuery库，请在<head>部分

中插入以下代码

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

一组单选按钮

3 个答案: