单击 jquery/javascript 中的 div 更改单选按钮值

Question

我目前正在尝试创建一个多项选择 activity，其中用户 select 旁边有单选按钮的几个答案之一。我已经能够通过像这样显式写出代码来改变单选按钮：

$("#choice0").on('click', function(){
    $("input[name=radioAwnser][value=0]").attr("checked","checked");
    console.log("clicked a");
});

$("#choice1").on('click', function(){
    $("input[name=radioAwnser][value=1]").attr("checked","checked");
    console.log("clicked b");
});

$("#choice2").on('click', function(){
    $("input[name=radioAwnser][value=2]").attr("checked","checked");
    console.log("clicked c");
});

不过，我不一定知道会有多少答案。当我尝试写一些更灵活的东西时：

function setUpAwnsers(){
    for(var i = 0; i<=3 ; i++){
        console.log("#choice" + i);
        $("#choice" + i).on('click', function(){
            $("input[name=radioAwnser][value=" + i +"]").attr("checked","checked");
            console.log("clicked");
        });
    }
}

当我单击 div 时，控制台以 "clicked" 响应，但单选按钮没有改变。

我是否遗漏了一些简单的东西，或者有更好的方法来解决这个问题？

Answer 1

不要在循环中绑定事件，只需使用 start with selector

添加事件处理程序即可

$(document).on("click", "[id^=choice]", function () { 
    var no = this.id.replace("choice","");
    $("input[name=radioAwnser][value=" + no + "]").prop("checked", true);
});

DEMO

如果你想用循环遵循这个，但它不是好的标准方法

function setUpAwnsers(){
    for(var i = 0; i<=3 ; i++){
        console.log("#choice" + i);
     $(document).on("click","#choice" + i, function(){
             var no = this.id.replace("choice","");
            $("input[name=radioAwnser][value=" + no  +"]").prop("checked",true);
            console.log("clicked");
        });
    }
}

Answer 2

一个可能的问题是，由于您在 for 循环中订阅点击事件，并试图在事件处理程序中使用值 i，因此 i 的值将始终为最后一个值（因为它不是本地范围的）。试试这个：

function setUpAwnsers(){
    for(var i = 0; i<=3 ; i++){
        console.log("#choice" + i);
        $("#choice" + i).on('click', function(i){
            $("input[name=radioAwnser][value=" + i +"]").attr("checked","checked");
            console.log("clicked");
        }.bind(null, i));
    }
}

Answer 3

你不应该为此使用 JavaScript：你需要的只是我...不是爱，而是 <label> 而不是 <div>

<input type="radio" id="choice1" />
<label for="choice1">The content from your div here</label>
<input type="radio" id="choice2" />
<label for="choice2">The content from your div here</label>

标签的使用会给您带来更多好处：当用户点击标签时，也会为收音机发出点击事件。 div 解决方案不会给你那个。

要了解更多信息，请参阅 label reference

单击 jquery/javascript 中的 div 更改单选按钮值

Change radio button value on click of a div in jquery/javascript

html

javascript

iteration

jquery