Develop Reference

click event only if the object is directly clicked

In the example below how to write console only if .bradio is clicked, and not button
i.e. on button click bradio.eq(1) should be checked, but without console writing
$('.bradio').on('change', function(){
console.log('onchange');
});
$('button').on('click', function(){
$('.bradio').eq(1).click();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='radio' class='bradio' name='bradio' value='pub' title='PUBLIC'>
<input type='radio' class='bradio' name='bradio' value='priv' title='PRIVATE'>
<br>
<button>CLICK</button>

To select an element without manually creating a click event, set its checked property:
$('.bradio').on('change', function() {
console.log('onchange');
});
$('button').on('click', function() {
$('.bradio').eq(1).prop('checked', true);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" class="bradio" name="bradio" value="pub" title="PUBLIC">
<input type="radio" class="bradio" name="bradio" value="priv" title="PRIVATE">
<br>
<button>CLICK</button>

Replaced toggle button with a checkbox but not working

I replaced the button on the jQuery toggle code with a checkbox but cannot get it to work.
Here is the HTML file where I tried to replace the button with a checkbox
index.html
<p> hi </p>
<!--<button>Press me</button>-->
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch"></label>
</div>
javascript
$(function() {
if (Cookies) {
$("p").toggle(!( !! Cookies("toggle-state")) || Cookies("toggle-state") === 'true');
}
// $('button').on('click', function()
$('#myonoffswitch.onoffswitch').is(":checked"), function()
{
$("p").toggle();
Cookies.set("toggle-state", $("p").is(':visible'), {
expires: 1,
path: '/'
});
});
});
Fiddle
What is wrong here?

$(function() {
$('#myonoffswitch').click(function(){
/*Use toggle if you need only hide and show */
//$("p").toggle();
/*If you want to know the current status of checkbox go with below code*/
if($(this).is(':checked')){
$("p").show();
}else{
$("p").hide();
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p> hi </p>
<!--<button>Press me</button>-->
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch"></label>
</div>
$('#myonoffswitch.onoffswitch').is(":checked"), function()
{
$("p").toggle();
Cookies.set("toggle-state", $("p").is(':visible'), {
expires: 1,
path: '/'
});
});
change this code to
$('#myonoffswitch').click(function(){
/*Use toggle if you need only hide and show */
//$("p").toggle();
/*If you want to know the current status of checkbox go with below code*/
if($(this).is(':checked')){
$("p").show();
}else{
$("p").hide();
}
})

Actually you are not working with check-box class at all. that's why it's not working.
Do it like below:-
Change-
$('#myonoffswitch.onoffswitch').is(":checked"), function() {
To
$('.onoffswitch-checkbox').click(function() {
And everything will work fine.
Working example:- https://jsfiddle.net/2uz0rsq8/
Note:- you can use :- $('.onoffswitch-checkbox').change(function(){ also (by #NikhilNanjappa)

Checkbox check first time not working, after second time, it is OK

I am trying to create a checkbox with label. When user click the label, it will check if checkbox checked. The first time, I click the label, the box is checked, but no alert action. After I click the second time, it start to function, alert action happen. What did I do wrong. I have tried to use individual ID. Click not working either.
<script type="text/javascript">
var elements = { "emo_lol": "1", "emo_cool": "2", "emo_cute": "3" };
jQuery.each( elements, function( id_name, num ) {
$('#'+ id_name).click(function(){
if ($('#'+id_name +'_checkbox').prop('checked')) {
alert('Checked');
}else{
alert('unchecked');
}
});
});
</script>
<input type="checkbox" name="emo_checkbox" id="emo_lol_checkbox">
<label id="emo_lol" for="emo_lol_checkbox" >LOL !</label>
<input type="checkbox" name="emo_checkbox" id="emo_cool_checkbox">
<label id="emo_cool" for="emo_cool_checkbox" >COOL !</label>
<input type="checkbox" name="emo_checkbox" id="emo_cute_checkbox">
<label id="emo_cute" for="emo_cute_checkbox" >CUTE !</label>

<script type="text/javascript">
$('label').click(function() {
if ($('#'+ $(this).attr('id') + '_checkbox').prop('checked') === false) {
alert('Checked');
}
else {
alert('Unchecked');
}
});
</script>
<input type="checkbox" name="emo_checkbox" id="emo_lol_checkbox">
<label id="emo_lol" for="emo_lol_checkbox" >LOL !</label>
<input type="checkbox" name="emo_checkbox" id="emo_cool_checkbox">
<label id="emo_cool" for="emo_cool_checkbox" >COOL !</label>
<input type="checkbox" name="emo_checkbox" id="emo_cute_checkbox">
<label id="emo_cute" for="emo_cute_checkbox" >CUTE !</label>
Also be sure, you have included jQuery library:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
And in new version of jQuery you can use insted of this:
if ($('#'+ $(this).attr('id') + '_checkbox').prop('checked') === false) {
alert('Checked');
}
else {
alert('Unchecked');
}
This piece of code:
// Just be careful, its inverted. Because, when you click label to check checkbox, the checkbox is still unchecked, and after alert will be checked...
if ($('#'+ $(this).attr('id') + '_checkbox').is(':checked') {
alert('Unchecked');
}
else {
alert('Checked');
}
Workind DEMO here in jsFiddle

Simplify things, you don't need each loop:
$('label').click(function() {
name=this.id;
if ($('#'+name+'_checkbox').prop('checked')) {
alert('Checked');
}
else{
alert('unchecked');
}
});
Demo: http://jsfiddle.net/fqvajvo1/2/
Script running correctly, script checks prop, but on label click -> checkbox is really unchecked, property changing comes later.
So, maybe in your case reverse logic could help (if you need alerts at all):
http://jsfiddle.net/fqvajvo1/4/ :)

I always use .is(':checked').I find it way more reliable
<script type="text/javascript">
var elements = { "emo_lol": "1", "emo_cool": "2", "emo_cute": "3" };
jQuery.each( elements, function( id_name, num ) {
$('#'+id_name +'_checkbox').change(function(){
if ($(this).is(':checked')) {
alert('Checked');
}else{
alert('unchecked');
}
});
});
</script>

your click id is not complete name,so add complete name and call $(this) property will be ok...
var elements = { "emo_lol": "1", "emo_cool": "2", "emo_cute": "3" };
jQuery.each( elements, function( id_name, num ) {
$('#'+ id_name+'_checkbox').click(function(){
if ($(this).prop('checked')) {
alert('Checked');
}else{
alert('unchecked');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="checkbox" name="emo_checkbox" id="emo_lol_checkbox">
<label id="emo_lol" for="emo_lol_checkbox" >LOL !</label>
<input type="checkbox" name="emo_checkbox" id="emo_cool_checkbox">
<label id="emo_cool" for="emo_cool_checkbox" >COOL !</label>
<input type="checkbox" name="emo_checkbox" id="emo_cute_checkbox">
<label id="emo_cute" for="emo_cute_checkbox" >CUTE !</label>

Use .on to work for all events and all clicks on jQuery
Mainly used for dynamic creating elements
$(document).on('click','selector',function(){
});
Use class names for best options for grouped elements

Once I remove an attribute I cant add it

I am trying to make a select all checkbox but when I deselect it and select it again it just doesn't select the boxes anymore. While it does work at the first time.
This is my code:
HTML:
<div id="Everything">
<input type="checkbox" id="all" />Select All
<br />
<br />
<div id="selectThese">
<input type="checkbox" id="First" />First
<br />
<input type="checkbox" id="Second" />Second
<br />
</div>
</div>
JS:
$(function () {
$("#Everything").on("click", "#all", function () {
var carStatus = $("#all").is(':checked');
if (carStatus == true) {
$("#selectThese input").attr("checked", "checked");
} else {
$("#selectThese input").removeAttr("checked");
}
});
});
Jsfiddle link: http://jsfiddle.net/Epsju/1/

You'll need to use prop() for that, and since it accepts a boolean to check and uncheck the element, you can use your variable directly, or just ditch the variable and use this.checked :
$(function () {
$("#Everything").on("change", "#all", function () {
$("#selectThese input").prop("checked", this.checked);
});
});
FIDDLE

http://jsfiddle.net/Epsju/6/
Use change also your fiddle uses #car, when it should use #all.
$(function () {
$("#Everything").on("change", "#all", function () {
$('#selectThese :checkbox').prop('checked', $(this).is(':checked'));
});
});

Try this:-
Demo
$(function () {
$("#Everything").on("change", "#all", function () {
$('#selectThese :checkbox').prop('checked', $(this).is(':checked'));
});
});
And viceversa
$('#selectThese :checkbox').on('change', function () {
$('#all').prop('checked', $('#selectThese :checkbox:checked').length == $('#selectThese :checkbox').length)
});

jQuery to check and uncheck checkboxes only fires once

I have a very simple requirement for my jQuery: to check a set of boxes if a radio button is checked, and to clear them all if another is checked.
The jquery works, however it only works once - that is if I click to check them all (all boxes check) and then click to clear them (all boxes clear), and then again click to check them all - there is no effect. Similarly if I manually uncheck some boxes then click to select all again, there is no effect.
jQuery
$('#all').on('change', function() {
if (!$(this).is(':checked')) {
$('.country').attr('checked', false);
} else {
$('.country').attr('checked', true);
}
});
$('#none').on('change', function() {
if (!$(this).is(':checked')) {
$('.country').attr('checked', true);
} else {
$('.country').attr('checked', false);
}
});
HTML
<div class="subselect">
<input type="radio" class="TLO" name="radio1" id="all" />Check All
<br />
<input type="radio" class="TLO" name="radio1" id="none" />Clear All
<br />
</div>
<br />
<br />
<div class="cselect" id="countries">
<input type="checkbox" class="country" />1
<br />
<input type="checkbox" class="country" />2
<br />
<input type="checkbox" class="country" />3
</div>
jsFiddle
http://jsfiddle.net/vsGtF/1/

Change your .attr() to .prop().
$('#all').on('change', function() {
if (!$(this).is(':checked')) {
$('.country').prop('checked', false);
} else {
$('.country').prop('checked', true);
}
});
$('#none').on('change', function() {
if (!$(this).is(':checked')) {
$('.country').prop('checked', true);
} else {
$('.country').prop('checked', false);
}
});
jsFiddle example
You could also reduce this to just:
$('#all').on('change', function () {
$('.country').prop('checked', $(this).is(':checked'));
});
$('#none').on('change', function () {
$('.country').prop('checked', !$(this).is(':checked'));
});
jsFiddle example
As the docs for .attr() state:
As of jQuery 1.6, the .attr() method returns undefined for attributes
that have not been set. To retrieve and change DOM properties such as
the checked, selected, or disabled state of form elements, use the
.prop() method.

I know that this has been duped alot on here but I did miss something, I had:
id = $(this).attr('id');
if($('#checkbox_' + id).prop('checked')){
$('#checkbox_' + id).attr('checked', false);
} else {
$('#checkbox_' + id).attr('checked', true);
}
And as mentioned above ALL cases of attr need swapping for prop()
if($('#checkbox_' + id).prop('checked')){
$('#checkbox_' + id).prop('checked', false);
} else {
$('#checkbox_' + id).prop('checked', true);
}
Hope that helps somebody...