jQuery复选框更改并单击事件

时间:2011-08-11 18:50:20

标签: javascript jquery event-handling



$(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"/>
&#13;
&#13;
&#13;

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

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

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

20 个答案:

答案 0 :(得分:806)

好吧,我没有看到与我匹配的答案,所以我会发布这个。在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);        
    });
});

答案 1 :(得分:85)

Demo

使用mousedown

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

答案 2 :(得分:45)

如果您使用<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

答案 3 :(得分:24)

嗯..只是为了挽救头痛(过去午夜),我可以想出:

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

希望有所帮助

答案 4 :(得分:10)

你在这里

<强> 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>

答案 5 :(得分:10)

对我来说这很有用:

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

答案 6 :(得分:6)

删除更改事件,而是更改click事件中文本框的值。而不是返回确认的结果,在var中捕获它。如果是真的,请更改该值。然后返回var。

答案 7 :(得分:6)

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

SELECT postcode FROM test
ORDER BY
    IF(postcode REGEXP '[A-Z]{2}', LEFT(postcode, 2), LEFT(postcode, 1)) ASC,
    IF(postcode REGEXP '[A-Z]{2}', CONVERT(MID(postcode, 3, LENGTH(postcode) - 2), UNSIGNED), CONVERT(MID(postcode, 2, LENGTH(postcode) - 1), UNSIGNED)) ASC

答案 8 :(得分: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/

答案 9 :(得分: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'));
            }
        }
    });
});

答案 10 :(得分:5)

试试这个

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

答案 11 :(得分: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;
    });
});

答案 12 :(得分: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>

答案 13 :(得分:1)

只需使用点击事件即可  我的复选框ID是CheckAll

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

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

             alert(";)");
      }
    }

答案 14 :(得分:1)

通过名称

获取无线电值
runas /netonly /user:otherdomain.rootdomain.corp\otherdomusername "mmc dsa.msc /server=otherdomdc.otherdomain.rootdomain.com"

答案 15 :(得分:1)

我不确定为什么每个人都这么复杂。 这就是我所做的一切。

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

答案 16 :(得分:0)

最新答案,但您也可以使用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>

答案 17 :(得分:0)

尝试

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'/>

答案 18 :(得分:0)

尝试一下:

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

答案 19 :(得分:-2)

child.listSkills.map(obj => (
  <small>
    <span class="label bg-red">
      {obj.JKMASALAH}
    </span>
  </small>
))