应该触发哪个事件，以便在选中单选按钮时发生某些事情

Question

我想在选中其中一个单选按钮时隐藏验证消息。

我尝试使用事件单击，更改和on("更改"，函数(({...}(

JQuery 的版本是 1.10.2

$(document).ready(function () {
    $("#radioButton1").on("change", function () {
        var isChecked = $("#radioButton1").is(":checked");
        if (isChecked)
            $("#validationMsg").text("");
        else
            $("#validationMsg").text("Please select something from above").css("color", "red");
    });
    $("#radioButton2").change(function () {
        var isChecked = $("#radioButton2").is(":checked");
        if (isChecked)
            $("#validationMsg").text("");
        else
            $("#validationMsg").text("Please select something from above").css("color", "red");
    });
});

Answer 1

下面是一个略有修改的代码工作示例。

更改事件在两个单选按钮上触发，并将值记录到控制台。如果选择任一选项，消息将自行清除。目前尚不清楚您是否真的希望根据无线电选择进行验证，还是需要选择无线电的要求;所以这就是这样做的。

演示：https://jsfiddle.net/wtfdanny/2g0wu5cf/

<table>
  <tr>
    <td><input type="radio" name="radios" value="1"> Option 1</td>
    <td><input type="radio" name="radios" value="2"> Option 2</td>
  </tr>
</table>
<span id="validationMsg">Please select something from above</span>

$(document).ready(function() {
  $('input[type="radio"]').on('change', function(e) {
    var value = $(this).val();
    console.log('Chose radio #', value)
    $('#validationMsg').text('');
  });
});

Answer 2

你的代码很好，应该可以工作。我会说问题出在其他地方，所以如果你也附上你的html会很好，也许那里有问题。

您可以检查它是否适用于我的代码笔：

https://codepen.io/MaimunoDampalo/pen/WBBdaZ

<div>
  <label>foo?
    <input name="foobar" type="radio" value="foo" id="radioButton1"/>
  </label>
  <label>bar?
    <input name="foobar" type="radio" value="bar" id="radioButton2" />
  </label>
</div>
  $(document).ready(function () {
    $("#radioButton1").on('change', function () {
        var isChecked = $("#radioButton1").is(":checked");
        if (isChecked) {
          alert("button1 true")
        }
    });
    $("#radioButton2").on("change", function () {
        var isChecked = $("#radioButton2").is(":checked");
        if (isChecked) {
          alert("button2 true")
        }
    });
  });

Answer 3

如果按钮是在页面加载后动态创建的，则需要使用此语法。

$(document).ready(function () {
    $(document).on("change", "#radioButton1" ,function () {
        var isChecked = $("#radioButton1").is(":checked");
        if (isChecked)
            $("#validationMsg").text("");
        else
            $("#validationMsg").text("Please select something from above").css("color", "red");
    });
});

Answer 4

请像这样使用，您需要首先在document.ready事件上显示消息，然后在选择单选按钮时隐藏或删除，希望对您有所帮助。谢谢。

$(document).ready(function () {
    $("#validationMsg").text("Please select something from above").css("color", "red");
    $("#radioButton1").on("change", function () {
        var isChecked = $("#radioButton1").is(":checked");
        if (isChecked)
            $("#validationMsg").text("");
        else
            $("#validationMsg").text("Please select something from above").css("color", "red");
    });
    $("#radioButton2").change(function () {
        var isChecked = $("#radioButton2").is(":checked");
        if (isChecked)
            $("#validationMsg").text("");
        else
            $("#validationMsg").text("Please select something from above").css("color", "red");
    });
});