Question

我尝试获取单选按钮onclick或onchange事件的值。但它只适用于第一项而非其他项目。当我点击第一个单选按钮时，它会提示单选按钮值。但是，当我点击其他辐射按钮时，它不会发出任何警报。

我的代码在这里

HTML

<input type="radio" value="1" name="layout" id="layout" class="ace">1
<input type="radio" value="2" name="layout" id="layout" class="ace">2
<input type="radio" value="3" name="layout" id="layout" class="ace">3
<input type="radio" value="4" name="layout" id="layout" class="ace">4

的jQuery

$('#layout').on("click", function(e){
    alert($(this).val());
});

Answer 1

尝试避免重复id's（ID在页面上应该是唯一的），而是使用name属性，如下所示： -

$('input[name="layout"]').on("click", function(e){
  alert($(this).val());
});

Answer 2

ID属性在页面上应该是唯一的。您需要使用class代替：

HTML：

<input type="radio" value="1" name="layout" class="layout ace">1
<input type="radio" value="2" name="layout" class="layout ace">2
<input type="radio" value="3" name="layout" class="layout ace">3
<input type="radio" value="4" name="layout" class="layout ace">4

jQuery的：

$('.layout').on("click", function(e){
    alert($(this).val());
});

来自MDN：

ID必须在文档中是唯一的，并且通常用于检索元素使用getElementById。

Answer 3

id属性在页面上必须是唯一的。你总是得到第一个元素的值...

Answer 4

        <script>
        function first()
        {
            var a = document.getElementById("opt1").value;
            alert(a);
        }
        function second()
        {
            var b=document.getElementById("opt2").value;
            alert(b);
        }
        function third()
        {
            var c=document.getElementById("opt3").value;
            alert(c);
        }
        function fourth()
        {
            var d=document.getElementById("opt4").value;
            alert(d);
        }
        </script>

            <input type="radio" value="1"  name="layout" id="opt1" class="layout ace" onclick="first()">1
            <input type="radio" value="2"  name="layout" id="opt2" class="layout ace" onclick="second()">2
            <input type="radio" value="3"  name="layout" id="opt3" class="layout ace" onclick="third()">3
            <input type="radio" value="4"  name="layout" id="opt4" class="layout ace" onclick="fourth()">4

单选按钮onchange / onclick事件无法正常工作

4 个答案: