Question

我正在尝试触发单选按钮的点击。我已经在另一个项目上成功完成了此任务，所以我看不到为什么在这种情况下无法正常工作。

这是我的HTML（摘自Contact form 7）：

<span class="wpcf7-list-item first">
  <label>
    <span class="wpcf7-list-item-label">Yes</span>
    <input type="radio" name="example-name" value="Yes" checked="checked">
  </label>
</span>

<span class="wpcf7-list-item last">
  <label>
    <span class="wpcf7-list-item-label">No</span>
    <input type="radio" name="example-name" value="No">
  </label>
</span>

这是我的jQuery：

jQuery(document).ready(function () {

    jQuery("#yes-btn").click(function () {
        jQuery(this).addClass('checked');
        jQuery("input[value='Yes']").trigger('click').addClass("working");
    });

    jQuery("#no-btn").click(function () {
        jQuery(this).addClass('checked');
        jQuery("input[value='No']").trigger('click').addClass("working");
    });

});

我知道选择器工作正常，因为.addClass()正常工作。

我还尝试了.prop("checked", true)而不是trigger("click")，但没有成功。

我正在使用jQuery 3.3.1。

该如何解决？

Answer 1

当您将“单引号”从“是”和“否”更改为“双引号”时，它将起作用。也可以在“是”和“否”周围不加引号，并且不能像选择器中的单引号一样。

jQuery(document).ready(function() {

    jQuery("#yes-btn").click(function() {
        jQuery(this).addClass('checked');
        jQuery('input[value="Yes"]').trigger('click').addClass("working");
    });

    jQuery("#no-btn").click(function() {
        jQuery(this).addClass('checked');
        jQuery('input[value="No"]').trigger('click').addClass("working");
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="wpcf7-list-item first">
<label>
<span class="wpcf7-list-item-label">Yes</span>
<input type="radio" name="example-name" value="Yes" checked="checked">
</label>
</span>

<span class="wpcf7-list-item last">
<label>
<span class="wpcf7-list-item-label">No</span>
<input type="radio" name="example-name" value="No">
</label>
</span>

<button id="yes-btn">Yes</button>

<button id="no-btn">No</button>

jQuery触发单击收音机不起作用

1 个答案: