Question

我有以下HTML代码：

<label class="radio">
    <input type="radio" name="msgTo" value="optiona" checked="checked">
    <i></i>Option A</label>
<label class="radio">
    <input type="radio" name="msgTo" value="optionb">
    <i></i>Option B</label>
<label class="radio">
    <input type="radio" name="msgTo" value="optionc">
    <i></i>Option C</label>
<label class="radio">
    <input type="radio" name="msgTo" value="optiond">
    <i></i>Option D</label>
<label class="radio">
    <input type="radio" name="msgTo" value="optione">
    <i></i>Option E</label>

我试图根据使用此代码选中的选项来尝试：

$('input[name="msgTo"]:checked').on('change', function() {

    alert('option changed');

    if ($('input[name="msgTo"]:checked').val() == 'optionc') {

        $('#outsideMsgWarning').show();
        $('#destEspecificos').hide();
        $('#locEspecificas').hide();

    } else if ($('input[name="msgTo"]:checked').val() == 'optiond') {

        $('#outsideMsgWarning').show();
        $('#destEspecificos').hide();
        $('#locEspecificas').show();
        $('.my_select_box').trigger('chosen:updated');

    } else if ($('input[name="msgTo"]:checked').val() == 'optione') {

        $('#outsideMsgWarning').show();
        $('#destEspecificos').hide();
        $('#locEspecificas').hide();

    } else if ($('input[name="msgTo"]:checked').val() == 'optionb') {

        $('#outsideMsgWarning').hide();
        $('#destEspecificos').show();
        $('#locEspecificas').hide();
        $('.my_select_box').trigger('chosen:updated');

    } else {

        $('#outsideMsgWarning').hide();
        $('#destEspecificos').hide();
        $('#locEspecificas').hide();
        $('.my_select_box').trigger('chosen:updated');

    }

});

当我选择第2，第3，第4或第5选项时，没有任何反应（应该隐藏/显示某些选项）但是当我回到第一个选项（这将是javascript中的ELSE）时，会显示警报。该警报仅用于测试目的。

我还尝试在复选框名称中添加方括号[]，但结果相同。

为什么javascript不会检测到每次更改？

提前致谢!!!

Answer 1

设置事件绑定的初始选择器仅查找已检查的单选按钮：

select lower(term) || to_char(to_date(year::text, 'YYYY'), 'YY');

由于默认情况下预先检查了第一个单选按钮，因此只会影响该单选按钮。

将行更改为：

$('input[name="msgTo"]:checked').on('change', function() {

这样组中的所有单选按钮都绑定到事件处理程序。

Answer 2

更改此onchange之类的$('input[name="msgTo"]').on('change', function()事件。您应该删除:checked

$('input[name="msgTo"]').on('change', function() {
 if($(this).is(':checked')){
  alert('option changed');
}
  if ($('input[name="msgTo"]:checked').val() == 'optionc') {

    $('#outsideMsgWarning').show();
    $('#destEspecificos').hide();
    $('#locEspecificas').hide();

  } else if ($('input[name="msgTo"]:checked').val() == 'optiond') {

    $('#outsideMsgWarning').show();
    $('#destEspecificos').hide();
    $('#locEspecificas').show();
    $('.my_select_box').trigger('chosen:updated');

  } else if ($('input[name="msgTo"]:checked').val() == 'optione') {

    $('#outsideMsgWarning').show();
    $('#destEspecificos').hide();
    $('#locEspecificas').hide();

  } else if ($('input[name="msgTo"]:checked').val() == 'optionb') {

    $('#outsideMsgWarning').hide();
    $('#destEspecificos').show();
    $('#locEspecificas').hide();
    $('.my_select_box').trigger('chosen:updated');

  } else {

    $('#outsideMsgWarning').hide();
    $('#destEspecificos').hide();
    $('#locEspecificas').hide();
    $('.my_select_box').trigger('chosen:updated');

  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="radio">
    <input type="radio" name="msgTo" value="optiona" checked="checked">
    <i></i>Option A</label>
<label class="radio">
    <input type="radio" name="msgTo" value="optionb">
    <i></i>Option B</label>
<label class="radio">
    <input type="radio" name="msgTo" value="optionc">
    <i></i>Option C</label>
<label class="radio">
    <input type="radio" name="msgTo" value="optiond">
    <i></i>Option D</label>
<label class="radio">
    <input type="radio" name="msgTo" value="optione">
    <i></i>Option E</label>

Answer 3

您正在选择已选中的输入。

$('input[name="msgTo"]:checked')

请尝试使用此选择器：

$('input[name="msgTo"]')

使用javascript检测复选框更改时的奇怪行为

3 个答案: