CODEWITHSUNDEEP
javascriptjqueryhtmlcheckbox
Jax Teller
Jax Teller

Reputation: 1467

check checkbox on click href and on click checkbox

I know there is many topics for check a checkbox by clicking on href, but in every solution i seen, you can't check the checkbox by clicking on the checkbox, because it wrapped by the <a> tag.

There is my html :

<a href='#' id='cb'>mode<input type='checkbox' id='mode'></a>

My Jquery :

    $("#cb").click(function(e) {
        e.preventDefault();
        $("#mode").prop("checked", !$("#mode").prop("checked"));
    })

What I need :

I need to be able to check the checkbox by clicking on href AND by clicking on the checkbox.

If this post is duplicate, i'm sorry but i didn't see it, link me the duplicate and i'll remove this.

JSFiddle

Upvotes: 5

Views: 8852

Answers (8)

Christof
Christof

Reputation: 2734

Check tag name of target to prevent while clicking on input - https://jsfiddle.net/fwzd08cw/2/

$("#cb").click(function(e) {
    if((e.target).tagName == 'INPUT') return true; 
    e.preventDefault();
    $("#mode").prop("checked", !$("#mode").prop("checked"));
});


$("#cb").click(function(e) {
  if((e.target).tagName == 'INPUT') return true; 
  e.preventDefault();
  $("#mode").prop("checked", !$("#mode").prop("checked"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href='#' id='cb'>mode<input type='checkbox' id='mode'></a>

Upvotes: 4

Mohamed Sobhy
Mohamed Sobhy

Reputation: 171

I don't know why you put checkobx inside the link but if you want a solution you can but the link inside a span like this

<a href='#' id='cb'><span id="mohamed">mode</span><input type='checkbox' id='mode'></a>


$("#mohamed").click(function(e) {
        e.preventDefault();
        $("#mode").prop("checked", !$("#mode").prop("checked"));
    })

check this pen http://codepen.io/mohamed_sobhy292/pen/wWPzoo

Upvotes: 0

Theodore K.
Theodore K.

Reputation: 5176

  • Use $('#cb, #mode') to select both elements
  • Use $(this).is('a') to check if href was the trigger and then check or uncheck accordingly
  • In every case do e.stopPropagation() to avoid calling click both times when checkbox is clicked 9one for input and one for href)

$('#cb, #mode').click(function (e) {
    if ($(this).is('a')) {
        e.preventDefault();
        $('#mode').prop('checked', !$('#mode').prop('checked'));
    }
    e.stopPropagation();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href='#' id='cb'>mode<input type='checkbox' id='mode'></a>

Upvotes: 0

Костя Самсин
Костя Самсин

Reputation: 57

Add style on input:

    pointer-events: none;

Upvotes: 2

Thomas Lebricon
Thomas Lebricon

Reputation: 84

The 'checking' is twice inverted when clicking on the checkbox,

Add : $("#mode").click(function(e) { e.stopPropagation(); }); to prevent this side effect of being inside the link.

Upvotes: 0

Alex M
Alex M

Reputation: 2836

Try this without any JS code:

<a href='#' id='cb'><label>mode<input type='checkbox' id='mode'></label></a>

https://jsfiddle.net/fwzd08cw/5/

Upvotes: 0

Rui Costa
Rui Costa

Reputation: 800

Your code have two events 'click' when you has click on checkbox, the parent trigger the 'click' event of them.
You need use event.stopPropagation() function to negate the propagation of event from children to parent.

$("#cb").click(function(e) {
  e.preventDefault();
  $('#mode').click(function(e) {
    e.stopPropagation();
  })
  $("#mode").prop("checked", !$("#mode").prop("checked"));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href='#' id='cb'>mode<input type='checkbox' id='mode'></a>

Upvotes: 2

Nitin Dhomse
Nitin Dhomse

Reputation: 2612

Try this, keep your input tag outside the anchor.

<a href='#' id='cb'> mode </a><input type='checkbox' id='mode'>

Upvotes: 1

Related Questions