JQuery флажок изменить и щелкнуть событие


564

$(document).ready(function() {
  //set initial state.
  $('#textbox1').val($(this).is(':checked'));

  $('#checkbox1').change(function() {
    $('#textbox1').val($(this).is(':checked'));
  });

  $('#checkbox1').click(function() {
    if (!$(this).is(':checked')) {
      return confirm("Are you sure?");
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="checkbox1"/><br />
<input type="text" id="textbox1"/>

Здесь .change()обновляет значение текстового поля со статусом флажка. Я использую, .click()чтобы подтвердить действие по снятию отметки. Если пользователь выбирает «Отмена», флажок восстанавливается, но .change()срабатывает до подтверждения.

Это оставляет вещи в несовместимом состоянии, и текстовое поле говорит ложь, когда флажок установлен.

Как я могу справиться с отменой и сохранить значение текстового поля в соответствии с состоянием проверки?


1
Он работает в FF и Chrome и имеет объясненное поведение в IE 8. Поэтому может быть важно отметить, в каких браузерах вам это нужно, а в каких вы видите ошибку.
Касдега

Это не самое лучшее, но я считаю, что это работает для меня здесь: http://jsfiddle.net/Skooljester/2Xxcn/ .
ayyp

Ответы:


904

Протестировано в JSFiddle и выполняет то, что вы просите. Этот подход имеет дополнительное преимущество - срабатывание при нажатии на ярлык, связанный с флажком.

Обновленный ответ:

$(document).ready(function() {
    //set initial state.
    $('#textbox1').val(this.checked);

    $('#checkbox1').change(function() {
        if(this.checked) {
            var returnVal = confirm("Are you sure?");
            $(this).prop("checked", returnVal);
        }
        $('#textbox1').val(this.checked);        
    });
});

Оригинальный ответ:

$(document).ready(function() {
    //set initial state.
    $('#textbox1').val($(this).is(':checked'));

    $('#checkbox1').change(function() {
        if($(this).is(":checked")) {
            var returnVal = confirm("Are you sure?");
            $(this).attr("checked", returnVal);
        }
        $('#textbox1').val($(this).is(':checked'));        
    });
});

128
Просто примечание, это гораздо быстрее использовать this.checkedвместо $(this).is(':checked'): jsperf.com/prop-vs-ischecked/5
Дакота

37
@Dakota Конечно, это намного медленнее, но мы все еще говорим о 600 тыс. Операций в секунду. Итак, 600 раз за миллисекунду. Я думаю, что если это начинает вызывать проблемы с производительностью на вашей веб-странице, вам, возможно, придется переоценить ваш javascript;) Тем не менее, полезно понимать показатели производительности с помощью кода. Спасибо.
Майк У

51
@MikeU: согласен с вами по поводу преждевременной оптимизации, но, учитывая, что this.checkedписать намного быстрее + ​​нативный javascript, может быть, в общем, стоило бы использовать в целом (не считая ~ 200-300 раз быстрее).
Левит

11
Я бы порекомендовал .prop () вместо .attr (), так как последний работает не во всех случаях, и я считаю, что jQuery сейчас рекомендует .prop ().
Кабадиша

2
Я думаю, что [это] в $ ('# textbox1'). Val (this.checked); ссылается на документ. Это должно быть $ ('# textbox1'). Val ($ ('# checkbox1'). Is (': checked'));
Юрин

90

демонстрация

использование mousedown

$('#checkbox1').mousedown(function() {
    if (!$(this).is(':checked')) {
        this.checked = confirm("Are you sure?");
        $(this).trigger("change");
    }
});

Он отображает предупреждение при его проверке и всегда мешает мне проверить на самом деле. Это на Хроме.
pimvdb

так же, как @pimvdm. Подтверждение появляется даже для check-action (оно должно появляться только для снятия флажка), и выбор ok не приводит к установке флажка.
Профессор Хаос

1
Работает при использовании мыши, но не при проверке клавиатуры.
frinux

3
@frinux Это довольно просто, потому что это вопрос, связанный с мышью. Пожалуйста, не отрицайте ответы, основываясь на их значимости для отдельных вопросов. Если у вас возникла проблема с включением состояния индикатора после проверки флажка через клавиатуру, пожалуйста, оставьте вопрос об этом вместо небрежного ответа на голосование.
Джозеф Марикл

3
Понижено, поскольку mousedown - не единственный способ взаимодействия пользователя с флажком.
Джонатан

51

Большинство ответов не поймут это (по-видимому), если вы используете <label for="cbId">cb name</label>. Это означает, что при нажатии на ярлык будет установлен флажок, а не непосредственно установлен флажок. (Не совсем вопрос, но различные результаты поиска, как правило, приходят сюда)

<div id="OuterDivOrBody">
    <input type="checkbox" id="checkbox1" />
    <label for="checkbox1">Checkbox label</label>
    <br />
    <br />
    The confirm result:
    <input type="text" id="textbox1" />
</div>

В этом случае вы можете использовать:

Earlier versions of jQuery:

$('#OuterDivOrBody').delegate('#checkbox1', 'change', function () {
    // From the other examples
    if (!this.checked) {
        var sure = confirm("Are you sure?");
        this.checked = !sure;
        $('#textbox1').val(sure.toString());
    }
});

Пример JSFiddle с jQuery 1.6.4

jQuery 1.7+

$('#checkbox1').on('change', function() { 
    // From the other examples
    if (!this.checked) {
        var sure = confirm("Are you sure?");
        this.checked = !sure;
        $('#textbox1').val(sure.toString());
    }
});

Пример JSFiddle с последней версией jQuery 2.x

  • Добавлены примеры jsfiddle и HTML с кликабельным флажком

1
Это #OuterDivOrBody нет .OuterDivOrBody :)
Лоран

24

Ну ... просто ради сохранения головной боли (здесь уже за полночь) я мог бы придумать:

$('#checkbox1').click(function() {
  if (!$(this).is(':checked')) {
    var ans = confirm("Are you sure?");
     $('#textbox1').val(ans);
  }
});

Надеюсь, поможет


11

Для меня это прекрасно работает:

$('#checkboxID').click(function () {
    if ($(this).attr('checked')) {
        alert('is checked');
    } else {
        alert('is not checked');
    }
})

4
Наткнулся на это через веб-поиск. Вы должны использовать «prop» вместо «attr» >> api.jquery.com/prop
Dr Schizo

11

Вот ты где

Html

<input id="ProductId_a183060c-1030-4037-ae57-0015be92da0e" type="checkbox" value="true">

JavaScript

<script>
    $(document).ready(function () {

      $('input[id^="ProductId_"]').click(function () {

        if ($(this).prop('checked')) {
           // do what you need here     
           alert("Checked");
        }
        else {
           // do what you need here         
           alert("Unchecked");
        }
      });

  });
</script>

6

Избавьтесь от события изменения и вместо этого измените значение текстового поля в событии щелчка. Вместо того, чтобы возвращать результат подтверждения, перехватите его в переменной. Если это правда, измените значение. Затем верните вар.


6

Чекбокс и проверка значения в том же цикле событий - проблема.

Попробуй это:

$('#checkbox1').click(function() {
    var self = this;
    setTimeout(function() {

        if (!self.checked) {
            var ans = confirm("Are you sure?");
            self.checked = ans;
            $('#textbox1').val(ans.toString());
        }
    }, 0);
});

Демо: http://jsfiddle.net/mrchief/JsUWv/6/


6

если вы используете iCheck Jquery, используйте приведенный ниже код

 $("#CheckBoxId").on('ifChanged', function () {
                alert($(this).val());
            });

5

Попробуй это

$('#checkbox1').click(function() {
        if (!this.checked) {
            var sure = confirm("Are you sure?");
            this.checked = sure;
            $('#textbox1').val(sure.toString());
        }
    });

5
$(document).ready(function() {
    //set initial state.
    $('#textbox1').val($(this).is(':checked'));

    $('#checkbox1').change(function() {
        $('#textbox1').val($(this).is(':checked'));
    });

    $('#checkbox1').click(function() {
        if (!$(this).is(':checked')) {
            if(!confirm("Are you sure?"))
            {
                $("#checkbox1").prop("checked", true);
                $('#textbox1').val($(this).is(':checked'));
            }
        }
    });
});

4
// this works on all browsers.

$(document).ready(function() {
    //set initial state.
    $('#textbox1').val($(this).is(':checked'));

    $('#checkbox1').change(function(e) {
        this.checked =  $(this).is(":checked") && !!confirm("Are you sure?");
        $('#textbox1').val(this.checked);
        return true;
    });
});

4
$('#checkbox1').click(function() {
    if($(this).is(":checked")) {
        var returnVal = confirm("Are you sure?");
        $(this).attr("checked", returnVal);
    }
    $('#textbox1').val($(this).is(':checked')); 
});


<div id="check">
    <input type="checkbox" id="checkbox1" />
    <input type="text" id="textbox1" />
</div>

4

Поздний ответ, но вы также можете использовать on("change")

$('#check').on('change', function() {
     var checked = this.checked
    $('span').html(checked.toString())
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="check" > <span>Check me!</span>


1

просто используйте событие клика, мой идентификатор флажка - CheckAll

     $('#CheckAll').click(function () {

        if ($('#CheckAll').is(':checked') == true) {

             alert(";)");
      }
    }

1

получить значение радио по имени

 $('input').on('className', function(event){
        console.log($(this).attr('name'));
        if($(this).attr('name') == "worker")
            {
                resetAll();                 
            }
    });

1

Я не уверен, почему все делают это так сложно. Это все, что я сделал.

if(!$(this).is(":checked")){ console.log("on"); }

-1
 $("#person_IsCurrentAddressSame").change(function ()
    {
        debugger
        if ($("#person_IsCurrentAddressSame").checked) {
            debugger

        }
        else {

        }

    })

3
Ответы только на код считаются некачественными: обязательно предоставьте объяснение, что делает ваш код и как он решает проблему. Это поможет вам и будущим читателям, если вы сможете добавить больше информации в свой пост. См. Также Объяснение полностью основанных на коде ответов: meta.stackexchange.com/questions/114762/…
borchvm
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.