jQuery 復選框更改和單擊事件

Question

 $(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()在確認之前觸發。

這會使 state 不一致，並且在選中復選框時文本框顯示為 false。

如何處理取消並保持文本框值與檢查 state 一致？

Answer 1

在JSFiddle中測試並執行您的要求。當單擊與復選框關聯的 label 時，此方法具有觸發的額外好處。

更新答案：

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

Answer 2

演示

使用mousedown

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

Answer 3

如果您使用<label for="cbId">cb name</label> ，大多數答案（大概）都不會抓住它。 這意味着當您單擊 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());
    }
});

jQuery 1.6.4 的 JSFiddle 示例

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

帶有最新 jQuery 2.x 的 JSFiddle 示例

• 添加了 jsfiddle 示例和 html 以及可點擊的復選框 label

Answer 4

好吧..只是為了避免頭痛（這里已經過了午夜），我可以想出：

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

希望能幫助到你

Answer 5

對我來說，這很好用：

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

Answer 6

給你

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>

Answer 7

遲到的答案，但您也可以使用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>

Answer 8

如果您使用的是 iCheck Jquery，請使用以下代碼

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

Answer 9

擺脫 change 事件，而是在 click 事件中更改文本框的值。 與其返回確認結果，不如在 var 中捕獲它。 如果為真，則更改該值。 然后返回 var。

Answer 10

單擊復選框並檢查同一事件循環中的值是問題所在。

嘗試這個：

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

Answer 11

嘗試這個

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

Answer 12

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

Answer 13

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

Answer 14

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

Answer 15

我不知道為什么每個人都把事情弄得這么復雜。 這就是我所做的一切。

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

Answer 16

只需使用點擊事件我的復選框 id 是 CheckAll

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

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

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

Answer 17

按名稱獲取無線電值

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

Answer 18

嘗試

 checkbox1.onclick= e => { if(.checkbox1.checked) checkbox1?checked =;confirm("Are you sure."). textbox1;value = checkbox1.checked; }

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

Answer 19

嘗試這個：

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

Answer 20

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

        }
        else {

        }

    })