ChatGPT解决这个技术问题 Extra ChatGPT

jQuery复选框更改和单击事件

$(document).ready(function() { //设置初始状态。$('#textbox1').val($(this).is(':checked')); $('#checkbox1').change (function() { $('#textbox1').val($(this).is(':checked')); }); $('#checkbox1').click(function() { if (!$ (this).is(':checked')) { return confirm("你确定吗?"); } }); });

此处 .change() 使用复选框状态更新文本框值。我使用 .click() 确认取消选中的操作。如果用户选择取消,复选标记将恢复,但 .change() 在确认之前触发。

这会使事情处于不一致的状态,并且在选中复选框时文本框会显示为 false。

如何处理取消并保持文本框值与检查状态一致?

它在 FF 和 chrome 中工作,并在 IE 8 中具有解释的行为。因此,注意您需要在哪些浏览器中工作以及您看到错误的浏览器可能很重要。
这不是最好的,但我相信它在这里对我有用:http://jsfiddle.net/Skooljester/2Xxcn/

c
callmebob

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

请注意,使用 this.checked 而不是 $(this).is(':checked') 要快得多:jsperf.com/prop-vs-ischecked/5
@Dakota 诚然,它要慢得多,但我们仍在谈论 600k 操作/秒。因此,每毫秒 600 次。我认为如果这开始在您的网页上引起性能问题,您可能需要重新评估您的 javascript ;) 不过,用代码理解性能指标是件好事。谢谢。
@MikeU:同意你关于过早优化的观点,但考虑到 this.checked 编写 + 原生 javascript 的时间要短得多,一般来说它可能真的值得使用(除了快 200 到 300 倍之外)。
我会推荐 .prop() 而不是 .attr() 因为后者在所有情况下都不起作用,我相信 jQuery 现在推荐 .prop() 。
我认为 [this] in $('#textbox1').val(this.checked);指文档。它应该是 $('#textbox1').val($('#checkbox1').is(':checked'));
C
Community

演示

使用mousedown

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

它在检查时显示警报,并且总是阻止我检查事实。这是在 Chrome 上。
与@pimvdm 相同。即使检查操作也会弹出确认(它应该只弹出取消选中)并且选择 ok 不会导致选中该框。
它在使用鼠标时有效,但在使用键盘检查时无效。
@frinux 这很简单,因为这是一个与鼠标相关的问题。请不要根据答案与完全不同的问题的相关性而对答案投反对票。如果您在通过键盘检查复选框后触发指示器状态时遇到问题,请发布有关它的问题,而不是粗心地否决答案。
由于 mousedown 不是用户可以与复选框交互的唯一方式,因此被否决。
l
lko

如果您使用 <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 example with 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 example with the latest jQuery 2.x

添加了 jsfiddle 示例和带有可点击复选框标签的 html


它是#OuterDivOrBody 不是 .OuterDivOrBody :)
我知道这是 SUPER OLD 但我发现它正在寻找其他东西并想让你知道在第二个例子中(我没有检查第一个小提琴)如果这个人点击取消,你仍然取消选中并显示错误,如果他们取消,那么它应该让它检查并说真。以防万一你想修复它。
z
zarun

好吧..只是为了避免头痛(这里已经过了午夜),我可以想出:

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

希望能帮助到你


P
Pedro Lobito

迟到的答案,但您也可以使用 on("change")

$('#check').on('change', function() { var checked = this.checked $('span').html(checked.toString()) }); < span>检查我!


谢谢,上面的答案很详细,你的很简单。谢谢
N
NoWar

给你

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>

c
chris

对我来说,这很好用:

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

通过网络搜索发现了这个。你应该使用'prop'而不是'attr'>> api.jquery.com/prop
y
yoozer8

摆脱 change 事件,而是在 click 事件中更改文本框的值。与其返回确认结果,不如在 var 中捕获它。如果为真,则更改该值。然后返回 var。


M
Mrchief

单击复选框并检查同一事件循环中的值是问题所在。

尝试这个:

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


u
umer

如果您使用的是 iCheck Jquery,请使用以下代码

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

M
Marty

只需使用点击事件我的复选框 id 是 CheckAll

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

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

             alert(";)");
      }
    });

S
ShankarSangoli

尝试这个

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

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

M
Marcelo De Zen
// 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;
    });
});

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

C
Char

我不知道为什么每个人都把事情弄得这么复杂。这就是我所做的一切。

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

S
Siva Anand

按名称获取无线电值

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

K
Kamil Kiełczewski

尝试

checkbox1.onclick= e => { if(!checkbox1.checked) checkbox1.checked = !confirm("你确定吗?"); textbox1.value = checkbox1.checked; }


Z
Zahra Badri

尝试这个:

    let checkbox = document.getElementById('checkboxId');
    if (checkbox.checked != true)
    {
        alert("select checkbox");
    }

H
Hari Lakkakula
 $("#person_IsCurrentAddressSame").change(function ()
    {
        debugger
        if ($("#person_IsCurrentAddressSame").checked) {
            debugger

        }
        else {

        }

    })

仅代码的答案被认为是低质量的:请务必说明您的代码的作用以及它如何解决问题。如果您可以在帖子中添加更多信息,它将帮助提问者和未来的读者。另请参阅解释完全基于代码的答案:meta.stackexchange.com/questions/114762/…