Какое событие должно быть запущено, чтобы при переключении переключателя что-то происходило?

Question

Я хочу скрыть сообщение проверки, когда один из переключателей отмечен.

Я пытался использовать события click, change и on ("change", function () {...})

Версия 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 событие, а затем скрыть или удалить при выборе переключателя, надеюсь, это поможет.спасибо.

$(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");
    });
});

Answer 4

Если кнопки создаются динамически после загрузки страницы, вам необходимо использовать этот синтаксис.

$(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");
    });
});