Question

所有我有一个带复选框的问题，我想在选中复选框时实现数字+ 1，当取消选中复选框时编号为-1，但现在如果我选择双击复选框，数字仍然在IE浏览器中增长，Google浏览器不会有这个问题。怎么处理呢？

$("input[type='checkbox']").attr('ondblclick', 'this.click()');
 $(document).on("click", ".checked", function (self) {
        var self = this;
        if (this.checked) {
           num++；
        }
       else{
            num--；
        }
   });

<input type="checkbox" class="checked"  data-bind="checked:isdifferrnt"  />

Answer 1

以下是您的信息的工作示例。

var num = 0;
$('#mycheck').on("click", function() {
  if ($(this).is(':checked')) {
    num++;
  } else {
    num--;
  }
  alert('Number = ' + num);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label>
  <input id="mycheck" type="checkbox" class="checked" data-bind="checked:isdifferrnt" />Check me.</label>

Answer 2

＆＃13;

var num = 0;
$('#mycheck').on("click", function() {
  if ($(this).is(':checked')) {
    num++;
  } else {
    num--;
  }
  alert('Number = ' + num);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label>
  <input id="mycheck" type="checkbox" class="checked" data-bind="checked:isdifferrnt" />Check me.</label>

＆＃13;

$(function () { 
        var num = 0;
        $(".checked").on("click", function () {
            if ($(this).is(':checked')) {
                num++;
            } else {
                num--;
            }
            $(".span").html(num);
        });
      });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" class="checked">Checked me
    <span class="span">0</span>

＆＃13;

当您快速单击复选框时，数字不会在0到1之间。

Answer 3

看到这张照片，当我快速点击复选框时，它会显示num是2个案例。

Answer 4

只需查看关于复选框的示例。

$("input:checkbox").change(function() {
  var ischecked= $(this).is(':checked');
  var num =0;
  if(ischecked){
  	num++;
  	alert('checkd ' + $(this).val() + num);
  }    
  else{
  	num--;
  	alert('uncheckd ' + $(this).val() + num);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<input type="checkbox" class="checked"  data-bind="checked:isdifferrnt"  />

Answer 5

根据w3schools，可以使用setTimout，因为它仅设置ONCE警报。这个答案来自：Jquery bind double click and single click separately

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index3</title>
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>

</head>
<body>
    @*<a href="#">Click Me</a>*@
    <form>
        <input type="checkbox" class="checked" data-bind="checked:isdifferrnt" />
        <input type="button" id="btn" value="getValue" />
    </form>
    <script type="text/javascript">
        var DELAY = 700, clicks = 0, timer = null;
        //don't use var num use numb
        var numb = 0;
        $(function () {
            $("form input:checkbox").on("click", function (e) {
                clicks++;  //count clicks
                if (clicks === 1) {
                    timer = setTimeout(function () {
                        alert("Single Click");  //perform single-click action
                        if ($("form input:checkbox").is(":checked"))
                        {
                            numb++;
                        }
                        else
                        {
                            numb--
                        }

                        clicks = 0;             //after action performed, reset counter, setTimeout is running once, so ok to use
                    }, DELAY);
                } else {
                    clearTimeout(timer);    //prevent single-click action
                    alert("Double Click");  //perform double-click action
                    clicks = 0;             //after action performed, reset counter
                }
            })
                       .on("dblclick", function (e) {
                           e.preventDefault();  //cancel system double-click event
                       });
        });

        $("#btn").click(function () {
            alert("Value of numb is: " + numb);
        });

    </script>
</body>
</html>

复选框单击不响应

5 个答案: