checkbox click is not response

Question

all I have a question with checkbox,I want to implementat the number + 1 when checkbox is checked,number -1 when checkbox is unchecked,but now if I qucik double click checkbox,number is still grow in IE Browser,Google Browser isn't had this problem.How to deal with it?

$("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"  />

sorry, a little writing free,but my IE Browser version is IE 11. — zhangyx007, Jul 06 '16 at 02:37

score 0 · Answer 1 · answered Jul 06 '16 at 02:34

0

Well, below is a working example for your information.

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>

answered Jul 06 '16 at 02:34

Nguyen Tuan Anh

1,036
8
14

thanks for you code,i try to use your code in my information,but the problem is no change,I feeled crazy for this problem. – zhangyx007 Jul 06 '16 at 02:48
hi,blow is my code,please help me to see if there are any questions?Appreciate it.. – zhangyx007 Jul 06 '16 at 03:30
I just edited your code adding the jQuery lib and it worked :) – Nguyen Tuan Anh Jul 06 '16 at 03:34

score 0 · Answer 2 · edited Jul 06 '16 at 04:16

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>

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

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

When you quick click checkbox, the num not betweent 0 to 1.

score 0 · Answer 3 · answered Jul 06 '16 at 03:25

0

see this pictiure,when I quick click checkbox,it will show num is 2 case.

answered Jul 06 '16 at 03:25

zhangyx007

35
6

score 0 · Answer 4 · answered Jul 06 '16 at 04:07

just see this sample regarding checkbox.

$("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"  />

score 0 · Accepted Answer · edited May 23 '17 at 11:44

According to w3schools it is okay to use setTimout because it sets an alarm only ONCE. This answer is referenced from: 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>

This is cool. If you click once and 7 milliseconds transpires then clicks is 1 and it is a single click. If there is another click before the 7 milliseconds then clicks is greater than 1 and logic falls into the else. — kblau, Jul 06 '16 at 05:59
thanks your code,I solved the problem according to your code,Appreciate it~ — zhangyx007, Jul 06 '16 at 07:18

checkbox click is not response

5 Answers5