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

Question

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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></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?

I think you need... As pointed by Rigin. event.preventDefault(); — Shubh
– Shubh, Commented Feb 3, 2016 at 6:45

gurvinder372 · Accepted Answer · 2016-02-03 06:45:34Z

Just change the button click event handler to change the property of the checkbox

$(document).on('click', '#chkbtn', function() {
  $('#chk').prop( "checked", true );
});

here is the full code with demo

$(document).on('click', '#chk', function() {
  if (this.checked === true) {
    console.log('true');
  } else {
    console.log('false');
  }
});
$(document).on('click', '#chkbtn', function() {
  if ( $('#chk').prop( "checked" ) )
  {
     $('#chk').prop( "checked", false );
  }
  else
  {
     $('#chk').prop( "checked", true );
  }
});

.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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

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

Rigin · Accepted Answer · 2016-02-03 06:47:02Z

0

try this : add event.preventDefault() after your JS action.

$(document).on('click', '#chk', function(event) {
  if (this.checked === true) {
    console.log('true');
  } else {
    console.log('false');
  }
     event.preventDefault();
});

answered Feb 3, 2016 at 6:47

Rigin

1872 silver badges17 bronze badges

Comments

Arun P Johny · Accepted Answer · 2016-02-03 08:32:50Z

Instead of triggering the click event, you can just set the checked state like

$(document).on('click', '#chk', function() {
  snippet.log('state: ' + this.checked);
});
$(document).on('click', '#chkbtn', function() {
  $('#chk').prop('checked', function(i, checked) {
    return !checked;
  });
});

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

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

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

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related