使用 jQuery,为单选按钮设置 onClick 事件侦听器的最佳方法是啥?

Posted

技术标签:

【中文标题】使用 jQuery,为单选按钮设置 onClick 事件侦听器的最佳方法是啥?【英文标题】:Using jQuery, what is the best way to set onClick event listeners for radio buttons?使用 jQuery,为单选按钮设置 onClick 事件侦听器的最佳方法是什么? 【发布时间】:2010-09-07 23:36:38 【问题描述】:

对于以下 html

<form name="myForm">
    <label>One<input  name="area"  type="radio" value="S"  /></label>
    <label>Two<input name="area"   type="radio" value="R" /></label>
    <label>Three<input name="area"   type="radio" value="O" /></label>
    <label>Four<input name="area" type="radio" value="U" /></label>
</form>

从以下 javascript 代码更改:

$(function() 
     var myForm = document.myForm;
     var radios = myForm.area;
     
     // Loop through radio buttons
     for (var i=0; i<radios.length; i++) 
        if (radios[i].value == "S") 
            radios[i].checked = true;   // Selected when form displays
            radioClicks();   // Execute the function, initial setup
        
        radios[i].onclick = radioClicks;  // Assign to run when clicked
       
 );

谢谢

编辑:我选择的答案回答了我提出的问题,但是我喜欢使用 bind() 的答案,因为它还显示了如何区分单选按钮组

【问题讨论】:

【参考方案1】:
$(document).ready(function()
    $("input[name='area']").bind("click", radioClicks);
);

functionradioClicks() 
    alert($(this).val());

我喜欢使用bind() 而不是直接连接事件处理程序,因为您可以将其他数据传递给事件处理程序(此处未显示,但数据是第三个 bind() 参数)并且您可以轻松取消绑定它(并且您可以按组绑定和取消绑定——请参阅 jQuery 文档)。

http://docs.jquery.com/Events/bind#typedatafn

【讨论】:

【参考方案2】:
$( function() 
    $("input:radio")
        .click(radioClicks)
        .filter("[value='S']")
        .attr("checked", "checked");
);

【讨论】:

【参考方案3】:
$(function() 

  $("form#myForm input[type='radio']").click( fn );

);

function fn()

   //do stuff here

【讨论】:

【参考方案4】:
$(function() 
    $('input[@type="radio"]').click(radioClicks);
);

【讨论】:

【参考方案5】:

我认为这样的事情应该可以工作(但未经测试):

$("input[@type='radio']").each(function(i) 
    if (this.val() == 'E') 
        radioClicks();
        this.get().checked = true;
    

$("input[@type='radio']").click(radioClicks);

【讨论】:

【参考方案6】:
$(function() 
    $('#myForm :radio').each(function() 
        if ($(this).value == 'S') 
            $(this).attr("checked", true);
            radioClicks();
        

        $(this).click(radioClicks);
    );
);

【讨论】:

以上是关于使用 jQuery,为单选按钮设置 onClick 事件侦听器的最佳方法是啥?的主要内容,如果未能解决你的问题,请参考以下文章

使用 jQuery、PHP 和 MySQL 为单选按钮加载 JSON 数据

将状态设置为单选按钮标签的值

如何在 Laravel 7 中为单选按钮设置表单标签

jQuery使用数据目标更改带有onClick侦听器的一组单选按钮标签的innerHtml

jQuery 选中/取消选中单选按钮 onclick

如何使用 react-bootstrap 为单选按钮调用 onChange?