单击图像时选择单选按钮

小编典典

单击图像时选择单选按钮

ajax

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

<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');              
})

阅读 240

2020-07-26

共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属性。

演示版

2020-07-26