Geek Answers Handbook

Check the "href" and "click click" boxes.

I know that there are many topics for checking a checkbox by clicking on href, but in every solution I saw, you cannot check the box by clicking this checkbox because it is wrapped with a tag <a>.

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 check the box by clicking on the href link AND by clicking on the box.

If this message is repeated, sorry, but I did not see it, I will contact me and I will delete it.

Jsfiddle

+4
source share
8 answers

- 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>
Hide result
+4

'click', , 'click' .
event.stopPropagation(), .

$("#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>
Hide result
+2

, .

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

:

    pointer-events: none;
+1

JS-:

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

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

0

"" ,

: $("#mode").click(function(e) { e.stopPropagation(); });, .

0
  • $('#cb, #mode')
  • $(this).is('a'), , href , .
  • e.stopPropagation(), , 9one 1 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>
Hide result
0

, checkobx , , , ,

<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"));
    })

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

0

More articles:


All Articles