mardi 2 février 2016

jQuery: How to tick checkbox using jquery without executing it's bind event?

I have a custom checkbox that will print it's value to the console and I want to put a button that will tick the checkbox without executing the checkbox event. This is for educational purpose only.

$(document).on('click', '#chk', function() {
  if (this.checked === true) {
    console.log('true');
  } else {
    console.log('false');
  }
});
$(document).on('click', '#chkbtn', function() {
  $('#chk').click();
});
.chk {
  display: none;
}
.chk + label {
  cursor: pointer;
  color: #000;
}
.chk:checked + label:after {
  font-family: 'FontAwesome';
  content: "\f164";
}
.chk + label:after {
  font-family: 'FontAwesome';
  content: "\f087";
}
<link href="http://ift.tt/1jAc5cP" rel="stylesheet" />
<link href="http://ift.tt/1PinXyn" rel="stylesheet" />
<script src="http://ift.tt/1oMJErh"></script>
<script src="http://ift.tt/1jAc4pg"></script>

<button class="btn btn-default" id="chkbtn">Click me!</button>
<br>
<input type="checkbox" class="chk" id="chk" />
<label for="chk"></label>

if the button is click, I just want the checkbox icon to change but I don't want the event of the checkbox executed. Is there a way to do that?




Aucun commentaire:

Enregistrer un commentaire