Змініть прапорець 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. Тому може бути важливо відзначити, у яких браузерах вам потрібно це працювати та в яких ви бачите помилку.
kasdega

Це не найкраще, але я вважаю, що він працює для мене тут: http://jsfiddle.net/Skooljester/2Xxcn/ .
айп

Відповіді:


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-iscked/5
Дакота,

37
@Dakota Звичайно, це набагато повільніше, але ми все ще говоримо 600k операцій в секунду. Отже, 600 разів за мілісекунд. Я думаю, якщо це почне спричиняти проблеми з продуктивністю на вашій веб-сторінці, можливо, вам доведеться повторно оцінити javascript;) Хоча добре зрозуміти показники продуктивності з кодом. Дякую.
Майк U

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

11
Я рекомендував би .prop () замість .attr (), оскільки останній працює не у всіх випадках, і я вважаю, що jQuery рекомендують .prop () зараз.
кабадіша

2
Я думаю, що [це] в $ ('# textbox1'). Val (це.визначено); посилається на документ. Він повинен бути $ ('# textbox1'). Val ($ ('# checkbox1'). Is (': перевірено'));
Юрін

90

Демо

Використовуйте mousedown

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

Він відображає попередження під час перевірки, і це завжди заважає мені перевірити фактично. Це на Chrome.
pimvdb

те саме, що і @pimvdm. Підтвердження спливає навіть для дій, які потрібно перевірити (воно повинно з’являтися лише для зняття прапорця), і якщо вибрати опцію, ви не встановите прапорець.
Професор Хаос

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
Д-р Шизо

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

Позбавтеся від події зміни та замість цього змініть значення текстового поля в події клацання. Замість того, щоб повернути результат підтвердження, вловіть його у варі. Якщо це правда, змініть значення. Потім поверніть var.


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
 $("#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.