jQuery флажок изменить и нажмите кнопку событие
у меня есть
<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?");
}
});
});
здесь измененное событие обновляет значение текстового поля со статусом флажка. Я использую событие click для подтверждения действия при снятии флажка. Если пользователь выбирает cancel, флажок восстанавливается, но изменение даже срабатывает до подтверждения, оставляя вещи в несогласованном состоянии (текстовое поле говорит false, когда флажок установлен). Как я могу справиться с отменой и сохранить значение текстового поля соответствует состоянию проверки?
16 ответов:
Ну, я не вижу ответа, который соответствует моему, поэтому я опубликую это. Проверено в 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); }); });
демо
использовать
mousedown$('#checkbox1').mousedown(function() { if (!$(this).is(':checked')) { this.checked = confirm("Are you sure?"); $(this).trigger("change"); } });
большинство ответов не поймают его (предположительно), если вы используете
<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 с кликабельной меткой флажка
хорошо .. просто ради спасения головной боли (здесь уже за полночь) я мог бы придумать:
$('#checkbox1').click(function() { if (!$(this).is(':checked')) { var ans = confirm("Are you sure?"); $('#textbox1').val(ans); } });надеюсь, что это помогает
для меня это прекрасно работает:
$('#checkboxID').click(function () { if ($(this).attr('checked')) { alert('is checked'); } else { alert('is not checked'); } })
вы
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>
избавьтесь от события изменения и вместо этого измените значение текстового поля в событии click. Вместо того, чтобы возвращать результат подтверждения, поймайте его в var. Если это правда, измените значение. Затем верните ВАР.
флажок нажмите и проверьте значение в том же цикле событий является проблемой.
попробуйте это:
$('#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); });
попробуй такое
$('#checkbox1').click(function() { if (!this.checked) { var sure = confirm("Are you sure?"); this.checked = sure; $('#textbox1').val(sure.toString()); } });
$(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')); } } }); });
// 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; }); });
$('#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>
Если вы используете Icheck Jquery используйте приведенный ниже код
$("#CheckBoxId").on('ifChanged', function () { alert($(this).val()); });
просто использовать событие click мои проверки удостоверения личности коробка CheckAll
$('#CheckAll').click(function () { if ($('#CheckAll').is(':checked') == true) { alert(";)"); } }
получить значение радио по имя
$('input').on('className', function(event){ console.log($(this).attr('name')); if($(this).attr('name') == "worker") { resetAll(); } });
Я не уверен, почему все это так сложно. Это все, что я сделал.
if(!$(this).is(":checked")){ console.log("on"); }
Comments