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

Question

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

368

У меня

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

и

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

ссылка JSFIDDLE

Здесь измененное событие обновляет значение текстового поля с помощью статуса флажка. Я использую событие click, чтобы подтвердить действие, сняв флажок. Если пользователь отменит отмену, галочка будет восстановлена, но изменение даже срабатывает перед подтверждением, оставляя вещи в несогласованном состоянии (текстовое поле говорит "false", когда флажок установлен). Как я могу справиться с отменой и сохранить значение текстового поля в соответствии с состоянием проверки?

Professor Chaos 11 авг. 2011, в 19:59

Источник

1

Он работает в FF и Chrome и имеет объясненное поведение в IE 8. Поэтому может быть важно отметить, в каких браузерах вам это нужно, а в каких вы видите ошибку.
kasdega 11 авг. 2011, в 18:56
0

Это не самое лучшее, но я считаю, что это работает для меня здесь: http://jsfiddle.net/Skooljester/2Xxcn/ .
jezza-tan 11 авг. 2011, в 19:00

Теги:

jquery

event-handling

15 ответов

77

Демо

Используйте mousedown

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

Joseph Marikle 11 авг. 2011, в 20:38

0

Он отображает предупреждение при проверке, и это всегда мешает мне проверить на самом деле. Это на Хроме.
pimvdb 11 авг. 2011, в 18:54
0

так же, как @pimvdm. Подтверждение появляется даже для check-action (оно должно появляться только для снятия флажка), и выбор ok не приводит к установке флажка.
Professor Chaos 11 авг. 2011, в 18:57
0

@ Джозеф: Спасибо за редактирование, но текстовое поле не меняется.
pimvdb 11 авг. 2011, в 18:58
0

@pimvdb о! текстовое окно? это не главная проблема: P
Joseph Marikle 11 авг. 2011, в 18:59
0

@ Джозеф подтверждение приходит на проверку с mousedown . Может ли он быть изменен, чтобы он появлялся при снятии флажка?
Professor Chaos 11 авг. 2011, в 19:05
0

Хорошо, upvote :) Хотя проверка с помощью клавиатуры - это обходной путь для подтверждения сейчас.
pimvdb 11 авг. 2011, в 19:05
0

@TheOtherGuy Да, это возможно: jsfiddle.net/4DqXv/4
Joseph Marikle 11 авг. 2011, в 19:07
1

Он работает при использовании мыши, но не при проверке клавиатуры.
frinux 22 фев. 2013, в 11:17
3

@frinux Это довольно просто, потому что это вопрос, связанный с мышью. Пожалуйста, не отрицайте ответы, основываясь на их значимости для отдельных вопросов. Если у вас возникла проблема с включением состояния индикатора после проверки флажка через клавиатуру, пожалуйста, оставьте вопрос об этом, вместо того, чтобы небрежно отвечать на голосование.
Joseph Marikle 22 фев. 2013, в 15:07
0

Джозеф, знаете ли вы, работает ли это решение для слепого человека, получающего доступ к странице? В другом контексте мне сказали держаться подальше от событий мыши, потому что слепым людям трудно пользоваться страницей.
kasdega 28 авг. 2013, в 01:14
0

@kasdega Я, к сожалению, не являюсь экспертом в этой области, но рискну предположить, что это не очень хорошее решение для такой ситуации. Я не уверен, как программы чтения с экрана обрабатывают формы. Я полагаю, что они используют пробел клавиатуры для установки или снятия флажков, и в этом случае я бы сказал, что нужно использовать событие нажатия клавиш или, что еще лучше, игнорировать проблему и оставить ее измененному событию. Проблема здесь заключалась в том, что флажок выглядел проверенным, прежде чем вы подтвердили или отменили. Такая эстетика не была бы важна для кого-то, использующего программу чтения с экрана.
Joseph Marikle 29 авг. 2013, в 02:33
0

что мы делаем при выборе флажка с меткой ..? <input type="checkbox" id="checkbox1" /> <label for="checkbox1">click</label>
Vivek Vikranth 13 фев. 2014, в 12:47
0

@VivekVikranth Вы можете просто добавить одно и то же событие на ярлык. Вы можете проявить фантазию и определить соответствующий переключатель при запуске события, но для демонстрации вот простой пример: jsfiddle.net/4DqXv/888
Joseph Marikle 13 фев. 2014, в 17:38
3

Понижено, поскольку mousedown - не единственный способ взаимодействия пользователя с флажком.
Jonathan 14 авг. 2017, в 10:01

Показать ещё 12 комментариев

36

Большинство ответов не поймают его (предположительно), если вы используете <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 с ярлыком флажка с надписью

lko 13 фев. 2013, в 08:16

1

Это #OuterDivOrBody нет .OuterDivOrBody :)
Laurent Brieu 02 авг. 2017, в 08:16

20

Хорошо... только ради спасения головной боли (в прошлую полночь здесь) я мог бы придумать:

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

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

zarun 11 авг. 2011, в 18:58

8

Здесь вы

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>

Academy of Programmer 10 июль 2014, в 14:51

8

Для меня это отлично работает:

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

chris 20 авг. 2013, в 11:09

4

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

6

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

yoozer8 11 авг. 2011, в 19:15

5

Проверить флажок и проверить значение в том же цикле событий.

Попробуйте следующее:

$('#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/

Mrchief 11 авг. 2011, в 19:22

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;
    });
});

devundef 10 фев. 2012, в 19:00

4

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

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

ShankarSangoli 11 авг. 2011, в 20:56

4

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

Jason 11 авг. 2011, в 19:45

2

$('#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>

user3636759 06 нояб. 2014, в 06:35

0

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

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

CharlotteOswald 03 май 2017, в 11:17

0

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

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

Siva Anand 01 дек. 2016, в 18:11

0

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

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

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

             alert(";)");
      }
    }

Geeti 15 фев. 2013, в 07:38

Ещё вопросы

Он работает в FF и Chrome и имеет объясненное поведение в IE 8. Поэтому может быть важно отметить, в каких браузерах вам это нужно, а в каких вы видите ошибку.
Это не самое лучшее, но я считаю, что это работает для меня здесь: http://jsfiddle.net/Skooljester/2Xxcn/ .
Он отображает предупреждение при проверке, и это всегда мешает мне проверить на самом деле. Это на Хроме.
так же, как @pimvdm. Подтверждение появляется даже для check-action (оно должно появляться только для снятия флажка), и выбор ok не приводит к установке флажка.
@ Джозеф: Спасибо за редактирование, но текстовое поле не меняется.
@pimvdb о! текстовое окно? это не главная проблема: P
@ Джозеф подтверждение приходит на проверку с mousedown . Может ли он быть изменен, чтобы он появлялся при снятии флажка?
Хорошо, upvote :) Хотя проверка с помощью клавиатуры - это обходной путь для подтверждения сейчас.
@TheOtherGuy Да, это возможно: jsfiddle.net/4DqXv/4
Он работает при использовании мыши, но не при проверке клавиатуры.
@frinux Это довольно просто, потому что это вопрос, связанный с мышью. Пожалуйста, не отрицайте ответы, основываясь на их значимости для отдельных вопросов. Если у вас возникла проблема с включением состояния индикатора после проверки флажка через клавиатуру, пожалуйста, оставьте вопрос об этом, вместо того, чтобы небрежно отвечать на голосование.
Джозеф, знаете ли вы, работает ли это решение для слепого человека, получающего доступ к странице? В другом контексте мне сказали держаться подальше от событий мыши, потому что слепым людям трудно пользоваться страницей.
@kasdega Я, к сожалению, не являюсь экспертом в этой области, но рискну предположить, что это не очень хорошее решение для такой ситуации. Я не уверен, как программы чтения с экрана обрабатывают формы. Я полагаю, что они используют пробел клавиатуры для установки или снятия флажков, и в этом случае я бы сказал, что нужно использовать событие нажатия клавиш или, что еще лучше, игнорировать проблему и оставить ее измененному событию. Проблема здесь заключалась в том, что флажок выглядел проверенным, прежде чем вы подтвердили или отменили. Такая эстетика не была бы важна для кого-то, использующего программу чтения с экрана.
что мы делаем при выборе флажка с меткой ..? <input type="checkbox" id="checkbox1" /> <label for="checkbox1">click</label>
@VivekVikranth Вы можете просто добавить одно и то же событие на ярлык. Вы можете проявить фантазию и определить соответствующий переключатель при запуске события, но для демонстрации вот простой пример: jsfiddle.net/4DqXv/888
Понижено, поскольку mousedown - не единственный способ взаимодействия пользователя с флажком.
Наткнулся на это через веб-поиск. Вы должны использовать «prop» вместо «attr» >> api.jquery.com/prop

kasdega · Accepted Answer · 2011-08-11T20-25-00.000Z

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

Исходный ответ:

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

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

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

Просто обратите внимание, гораздо быстрее использовать this.checked вместо $(this).is(':checked') : jsperf.com/prop-vs-ischecked/5
@Dakota Конечно, это намного медленнее, но мы все еще говорим о 600 тыс. Операций в секунду. Итак, 600 раз за миллисекунду. Я думаю, что если это начинает вызывать проблемы с производительностью на вашей веб-странице, вам, возможно, придется переоценить ваш javascript;) Тем не менее, полезно понимать показатели производительности с помощью кода. Благодарю.
@MikeU: согласен с вами по поводу преждевременной оптимизации, но, учитывая, что this.checked гораздо короче для написания + нативный javascript, его, возможно, действительно стоит использовать вообще (не считая того, что в ~ 200-300 раз быстрее).
Я бы рекомендовал .prop () вместо .attr (), поскольку последний работает не во всех случаях, и я считаю, что jQuery сейчас рекомендует .prop ().
@RyanMcArthur нет, он возвращает текущее состояние.
@MarkoMackic Вы правы, неправильно прочитали это. Я удалил мой комментарий, чтобы избежать путаницы, спасибо.
Я думаю, что [это] в $ ('# textbox1'). Val (this.checked); ссылается на документ. Это должно быть $ ('# textbox1'). Val ($ ('# checkbox1'). Is (': checked'));