使用jQuery选中单选按钮不会触发单选按钮的onclick事件

Question

我有一对收音机，使用bind()函数在页面的.ready事件上分配功能。 然后，在同一个.ready事件上，我检查另一个输入的值，如果它的值是“1”，则在页面加载时预先选择第二个单选按钮。 以下是代码片段。

<input type="radio" name="fpago" id="fpago1" value="1" />one
<input type="radio" name="fpago" id="fpago2" value="2" />two

...

$(document).ready(function() {
    $("#myspan").hide();

    $("#fpago1, #fpago2").bind('change click',function(){
        togglePlazo();
    });

//initial condition to preselect radio #2
    grupo = $("#id_grupo").val();
    if(grupo != '0'){
        $("#fpago2").attr('checked', true); //checks the radio, but doesn't trigger function
    }

});

--> 点击此处 查看更完整的代码

问题在于，如果条件满足，单选按钮确实被选中，但绑定的函数togglePlazo()不会触发...

如果稍后我手动点击单选按钮，则函数会被触发，span标签也会切换。仅在使用jQuery进行初始“检查”时，尽管单选按钮已更改，但函数未触发。

我不知道我缺少了什么，也许我应该绑定更多的事件而不仅仅是change或click... 我只是找不到我做错了什么。

注意：我正在使用jQuery 1.4.2，但fiddle设置为使用1.6.4（没有1.4.2作为选项）

- DiegoDD

---

你尝试过哪个版本的jQuery？ - DiegoDD

我刚刚运行了你提供的代码片段。 - Sterling Archer

加载页面时是否显示“bla bla”文本？因为如果您手动单击收音机，则会更改。不起作用的是在加载页面时默认显示span的文本（甚至不触摸任何内容）。如果它可以工作，那么您应该是某种巫师！XD因为它根本不起作用。（或者您使用什么浏览器？尽管我怀疑这并不重要） - DiegoDD

Answer 1

当你设置 checked 属性时，只需要触发点击事件即可。

$("#fpago2").attr('checked', true).trigger('click');

在元素上更改属性不会触发更改事件...无论是通过原生的 setAttribute 还是使用 jQuery 的 attr。

- adamb

---

我知道我可以这样做（或者.click()，它是一样的），但是我想知道为什么默认情况下它不会触发，因为事件已经绑定到了单选框。 - DiegoDD

更改元素上的属性不会触发“changed”事件...无论是通过本地的“setAttribute”还是使用jQuery的“attr”。 - adamb

尝试使用val()设置单选框/复选框将不会触发更改事件（或不做任何事情）。检测此类属性更改的方法是使用DOM变异观察器 - 但对于此操作来说，那可能是过度杀伤。 - adamb

最近我们会使用prop作为$("#fpago2").prop('checked', true).trigger('click');。 （说明：该句话是在讲某种编程语言中的代码用法，使用prop函数来设置元素的属性并触发点击事件。我根据要求进行了翻译，如有错误请指正。） - Mark Schultheiss

@MarcusJuniusBrutus - 是的，我的评论关键是使用prop()而不是attr()，尽管我同意您使用change事件的做法 - 这完全取决于您的处理程序设置方式（您监视哪些事件），或者像OP一样同时使用bind（顺便说一下，使用.on('change click',...代替bind()）。 - Mark Schultheiss

Answer 2

$('input:radio[name="fpago"]')
  .filter(`[value="1"]`)
  .prop('checked', true)
  .trigger("change");

- Thao Nguyen

---

请记住，Stack Overflow 不仅旨在解决当前的问题，还要帮助未来的读者找到类似问题的解决方案，这需要理解底层代码。对于我们社区中的初学者和不熟悉语法的成员来说，这尤其重要。鉴于此，您能否编辑您的答案，包括您正在做什么的解释以及为什么您认为这是最好的方法？ - Jeremy Caney

Answer 3

如果你在imageTypeToggle函数中写入console.log('yes');，并且在页面加载时在控制台中看不到yes的输出，那么你需要像下面这样触发。

$(function () {
    $(window).load(function(){
    $("[name=image_type]").on("change",imageTypeToggle).trigger('click');
 })

- boy108zon