单击图像时选择单选按钮答案

【问题标题】：Selecting a radio button when clicking an image单击图像时选择单选按钮
【发布时间】：2015-05-08 11:32:36
【问题描述】：

我想在单击他的图像时选择单选按钮，但它不起作用。这是我尝试过的：

<ul id="options-31-list" class="options-list">
    <li>
        <a class="mydata" href="" data="84">
            <img class="small-image-preview" src="value_id/84/file/o2.jpg/">
        </a>
        <input class="radio validate-one-required-by-name product-custom-option" type="radio" data="84" value="84" onclick="opConfig.reloadPrice();">
    </li>
    <li>
        <a class="mydata" href="" data="85">
            <img class="small-image-preview" src="value_id/85/file/vodafone.jpg/">
        </a>
        <input class="radio validate-one-required-by-name product-custom-option" type="radio" data="85" value="85" onclick="opConfig.reloadPrice();">
    </li>
    <li>
        <a class="mydata" href="" data="86">
            <img class="small-image-preview" src="value_id/86/file/t-mobile.jpg/">
        </a>
        <input class="radio validate-one-required-by-name product-custom-option" type="radio" data="86" value="86" onclick="opConfig.reloadPrice();">
    </li>
</ul>

我对两者都有相同的 data="" 属性：对于图像和输入，有什么方法可以在我单击图像时检查输入（那个收音机）？

谢谢

更新： 我发现了一些有效的代码，但只能在图像上点击三下，所以当点击到最后一个时脚本停止，无法再次选择第一个或第二个，我不知道为什么......我认为必须取消选中所有单选按钮，然后选中选中的那个... 有人可以帮我解决这个问题吗？

jQuery(".mydata").click(function(){ 
jQuery(this).parent().children("input").attr('checked','true');              
})

【问题讨论】：

通过点击img选择单选按钮时是否需要触发onClick-function？
你的 php getOptionTypeId 返回 0？
是 getOptionTypeId 返回 0
我更新了我的第一个 html 代码，看看到底有什么

标签： jquery ajax magento

【解决方案1】：

这个 jquery 代码可以帮助你：

$("a").click(function() {
    $(this).next().prop("checked", true);
});

演示：http://jsfiddle.net/k5rkxkos/

更新

在纯 Javascript 中（因为你说你不是 jquery 专家；）），你可以这样做：

var a = document.getElementsByTagName("a");
for ( var i = 0; i < a.length; i++ ) {
    a[i].onclick = function() {
        var id = this.getAttribute("data-id");
        document.getElementById(id).checked = true;
    }
}

演示：http://jsfiddle.net/k5rkxkos/1/

更新

这是根据您的更改更新的代码：

var a = document.getElementsByTagName("a");
for ( var i = 0; i < a.length; i++ ) {
    a[i].onclick = function(e) {
        e.preventDefault();
        var id = this.getAttribute("data");
        document.querySelector('input[data="' + id +'"]').checked = true;
    }
}

注意：必须添加输入name属性。

Demo

【讨论】：

我认为我需要这个由 Id 选择，因为可以有超过 10 个选项。并且每张图片都有自己的电台，谢谢你的回答。
您可以通过以下方式获取id：$(this).next()[0].id
我发现了这样的东西：onclick="document.getElementById('m1_2').checked=true;"但我不是 jquery 专家，因为我在这里发帖
如果下一个元素没有输入怎么办？
我收到此错误 TypeError: document.getElementById(...) is null

【解决方案2】：

试试这个：

<input type="radio" id="radio_1"  />
<label for="radio_1"><img src="image.jpg" id="radio_1" /></label>
<label for="radio_1">Radio - 1</label>

【讨论】：

【解决方案3】：

$("a").click(function(){
    $(this).next("input[type=radio]").prop("checked", true);
});

http://jsfiddle.net/2cuscbuk/

【讨论】：

由于单选按钮上有一个onClick-event，它也可能是触发点击事件的可能解决方案。
您好，我正在编辑我的代码，您现在可以看一下吗？我对两者都有相同的 data="" 属性：用于输入和图像，谢谢

【解决方案4】：

如果您从单选按钮上的数据库中选择图像名称。在此示例中，我从数据库中获取图像并将它们用于下一个 SQL 查询。或者，如果您想通过单击图像来选择单选按钮，那么您需要设置 input id="value" 并设置 label for="value" （这意味着对输入值和标签值使用相同的值）您看代码就能理解。

<?php
$sql = "SELECT `img` FROM `table_name`";
$result_sql = mysqli_query($conn, $sql);
while ($row = $result_sql -> fetch_assoc()) {
$img = $row['img']; ?>
    <input type="radio" name="img_name" value="<?= $img ?>" id="<?= $img ?>">
    <label for="<?= $img ?>"><img style="width:100px;" src='../upload/<?= $img ?>'></label>
<?php } ?>

【讨论】：