Question

我有以下html

<div id="test"></div>
<div id="test2">
    <input type="radio" id="RBtest1">Yes</input>
    <input type="radio" id="RBtest2">No</input>
</div>

以及以下javascript

    $('#RBtest1').onclick = function () {
        alert("Test");
        $('#RBtest1').prop('checked', true).checkboxradio('refresh');
        $('#RBtest2').prop('checked', false).checkboxradio('refresh');
    };

    $('#RBtest2').onclick = function () {
        $('#RBtest2').prop('checked', true).checkboxradio('refresh');
        $('#RBtest1').prop('checked', false).checkboxradio('refresh');
        $('#test').append('test');
    };

这个javascript在页面加载后触发但是当我点击单选按钮时没有任何反应。有人可以在这看到我出错的地方。

Answer 1

您可以使用通用名称属性进行单选：

 <input type="radio" name="r1" id="RBtest1">Yes</input>
 <input type="radio" name="r1" id="RBtest2">No</input>

更新：：当您尝试将javascript click事件绑定到jquery对象时，click事件不起作用。您应该使用$('#RBtest1')[0]，$('#RBtest2')[0]与javascript点击事件一起使用。或者使用jquery click事件：

 $('#RBtest1').click(function () {
   alert("Test");
   $('#RBtest1').prop('checked', true).checkboxradio('refresh');
   $('#RBtest2').prop('checked', false).checkboxradio('refresh');
 });

 $('#RBtest2').click(function () {
   $('#RBtest2').prop('checked', true).checkboxradio('refresh');
   $('#RBtest1').prop('checked', false).checkboxradio('refresh');
   $('#test').append('test');
 );

Answer 2

你的jquery错了。这是一个可能的解决方案

$('#RBtest1').click(function () {
    alert("Test");
    $('#RBtest1').prop('checked', true).checkboxradio('refresh');
    $('#RBtest2').prop('checked', false).checkboxradio('refresh');
});

$('#RBtest2').click(function () {
    $('#RBtest2').prop('checked', true).checkboxradio('refresh');
    $('#RBtest1').prop('checked', false).checkboxradio('refresh');
    $('#test').append('test');

});

Answer 3

实际上你不需要jquery来改变无线电的属性，因为如果你用相同的名字对它们进行分组，无线电有检查/取消选中功能：

<input type="radio" name='ans' id="RBtest1">Yes</input>
<input type="radio" name='ans' id="RBtest2">No</input>

试试这个：

$('#RBtest1')[0].onclick = function () {
   alert("Test");
   $('#RBtest1').prop('checked', true).checkboxradio('refresh');
   $('#RBtest2').prop('checked', false).checkboxradio('refresh');
};

$('#RBtest2')[0].onclick = function () {
   $('#RBtest2').prop('checked', true).checkboxradio('refresh');
   $('#RBtest1').prop('checked', false).checkboxradio('refresh');
   $('#test').append('test');
};

我们可以看到你正在混合使用jQuery和javascript选择器和事件，而你可以在本地js中执行此操作，但如果你这样做，jquery很棒：

$('#RBtest1').click(function () {
   alert("Test");
   $('#RBtest1').prop('checked', true).checkboxradio('refresh');
   $('#RBtest2').prop('checked', false).checkboxradio('refresh');
});

$('#RBtest2').click(function () {
   $('#RBtest2').prop('checked', true).checkboxradio('refresh');
   $('#RBtest1').prop('checked', false).checkboxradio('refresh');
   $('#test').append('test');
});

Answer 4

radiobutton有onchange事件。

试试此代码

$(document).ready(function () {
    $("input[type=radio]").on("change", function () {
        var item = this;
        if (item.id == "RBtest2") $('#test').append('test');
        else {$('#test').html("");}
    });

});

示例：JSFIDDLE

将onclick事件添加到jquery中的单选按钮

4 个答案: