Change checkbox toggle function from click to touchstart

Question

I am developing a cordova app. Because of the 300ms delay with the click event I don't want to use that. How do I change the event a <input type='checkbox'> element listens to for toggeling it's checkmark from click to e.g. touchstart?

The closest I got was making the checkbox disabled and adding this code:

$(':checkbox').each(function(){
        $(this).bind('touchstart', function(){
            if(this.checked) {
                this.checked = true;
            } else {
                this.checked = false;
            }
        })
    });

Unfortunately touchstart does not trigger.

Have you thought about using fastclick (https://github.com/ftlabs/fastclick)? It eliminates the 300ms click delay. — David, Jul 05 '17 at 21:25

score 1 · Answer 1 · answered Jul 05 '17 at 10:03

1

With that code checkbox event will called twice. First touchstart event will called and then after 300ms delay click event will called real event checkbox. Let's try this code

$(':checkbox').each(function(){
    $(this).bind('touchstart', function(){
        if(this.checked) {
            this.checked = true;
        } else {
            this.checked = false;
        }
    }).bind('click', function(e) {
        e.preventDefault();
    });
});

answered Jul 05 '17 at 10:03

Yusril Herlian Syah

497
1
6
12

The code does not work like that, but e.preventDefault() was a key function I was missing. So you earned that bounty :) For a working version, see my answer – David Schumann Jul 07 '17 at 14:04

score 0 · Answer 2 · answered Jun 25 '17 at 17:56

0

you can use this code

   document.querySelector("#idofelement").addEventListener("touchend", function() {


    }

answered Jun 25 '17 at 17:56

Muhammad Rameez

70
2
8

Wouldn't this still have the old EventListener listening for click events on the checkbox, making it react twice? – David Schumann Jun 25 '17 at 18:01
Well it won't work like this, as the callback function you provide is empty. But it won't unsubscribe the normal `click` event either. – David Schumann Jun 25 '17 at 18:28

score 0 · Accepted Answer · answered Jul 07 '17 at 14:01

for one, I need to call preventDefault() on the caught event.

The other problem was, that checked is not an actual jquery property of checkboxes, and I need to work with prop()

So what ended up working was:

$('.divClassContainingCheckbox').each(function(){
    $(this).bind('touchstart', function(e){
        e.preventDefault();  // prevents click from triggering check
        checkbox = $(this).find(':checkbox');
        if(checkbox.is(":checked")) {
            checkbox.prop('checked', false);
        } else {
            checkbox.prop('checked', true);
        }
    })
});

HTML:

<div class='divClassContainingCheckbox'>
    <input type='checkbox' />
</div>

score 0 · Answer 4 · edited Dec 19 '18 at 00:35

0

This function works for me, I get the attr for checkbox label, and then I checked the input type checbox programaticaly

function checkedCheckbox() {  
  var id = $(this).attr('for');  
  var element = $('#'+id);
  var isChecked = element.prop("checked");

  if(isChecked) {
    $(element).attr("checked", false);
  } else {
    $(element).prop('checked', true);
  }
}

edited Dec 19 '18 at 00:35

GMB

216,147
25
84
135

answered Dec 19 '18 at 00:24

Acronus2008

1

Change checkbox toggle function from click to touchstart

4 Answers4