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

radio button onchange/onclick event not work properly

本文关键字：常工作 工作 onchange onclick 事件 单选按钮      更新时间：2023-09-26

我尝试获取单选按钮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());
});

尽量避免重复的id's（Id在页面上应该是唯一的），而是使用如下所示的名称属性：-

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

id属性在页面上必须是唯一的。您总是获得具有该id的第一个元素的值…

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。

        <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
相关文章：