Develop Reference

How to bind to checkbox checked event

How to run javascript code if checkbox is checked?
checkbox is defined as
<input type="checkbox" id="Maksja_piiratudes" name="Maksja_piiratudes"
onfocus="if(typeof this.ischanged=='undefined') this.ischanged=false" onblur="summarefresh()" onclick="dataChanged(this)">
I tried
$(function () {
$("#Maksja_piiratudes").on("change", function() {
alert('checkbox is checked');
}); // end on change
}); // end $
But this runs also if checkbox is unchecked.
How to run code only if checkgox is selected ?
Bootstrap 3, jquery, jquery UI are used.

You can use the checked property of an checkbox input.
$(function()
{
$('#Maksja_piiratudes').on('change', function()
{
if (this.checked)
{
alert('checkbox is checked');
}
});
});
Edit:
I prefer the vanilla style more.. so just in case someone needs it:
document.querySelector('#Maksja_piiratudes')
.addEventListener('change', function()
{
if (this.checked)
{
alert('checkbox is checked!');
}
}, false);

Try This
$(function () {
$("#Maksja_piiratudes").on("change", function() {
if ($(this).prop("checked") == true) {
alert('checkbox is checked');
} //end if
}); // end on change
}); // end $
If you want to make it global for all checkboxes use the below:
$(function () {
$("input[type='checkbox']").on("change", function() {
if ($(this).prop("checked") == true) {
alert('checkbox is checked');
} //end if
else {
alert('checkbox is unchecked');
}
}); // end on change
}); // end $

jQuery .on() tr click event using .not() on tr checkbox click?

So my title may be confusing, but it has the right details. I have a table with clickable rows. When clicking the row, the row highlights. The table also has a checkbox column. Clicking the checkbox should NOT highlight or remove highlight from the row. How can I properly use .not() or :not in the .on('click', 'tr', function(){ ... }) ? http://jsfiddle.net/vmu0p2oe/
$('table').on('click', 'tr', function () {
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
//$(this).find(":checkbox").prop("checked", false);
}
else {
$('tr.selected').removeClass('selected');
$(this).addClass('selected');
//$(this).find(":checkbox").prop("checked", true);
}
});

Add this to the beginning of the handler:
if($(e.target).is('input[type=checkbox]')) {
return;
}
This will stop the handler from running if the element clicked is a checkbox.
Fiddle: http://jsfiddle.net/vmu0p2oe/1/

Add a handler for the checkbox that uses stopPropagation() to prevent the click from bubbling out to the tr:
$('table').on('click', ':checkbox', function(e) {
e.stopPropagation();
});
DEMO

How about this:
$('table').on('click', 'tr', function (e) {
var el = e.target;
if ( el.type !== "checkbox"){
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
//$(this).find(":checkbox").prop("checked", false);
} else {
$('tr.selected').removeClass('selected');
$(this).addClass('selected');
//$(this).find(":checkbox").prop("checked", true);
}
}
});
fiddle

Change the css based on select value item using jquery

Fiddle
i have a jquery which is for that, if the selected value is "<>"(Between) i want to change the style to display:block to an input box .. but here all the selected items css is changed
$(document).ready(function () {
$('.condition-change').change(function () {
if ($('select[name="SearchCondition"]').find('option[value="<>"]').attr("selected", true)) {
$('.second-value').css("display", "block");
}
});
});

Wrong condition
$(document).ready(function () {
$('.condition-change').change(function () {
if($('select[name="SearchCondition"]').find('option[value="<>"]').prop("selected")==true)
{
$('.second-value').css("display", "block");
}
});
});

You simply need to access the selected option value which you can get using val(), so put condition on val(),
Live Demo
$(document).ready(function () {
$('.condition-change').change(function () {
if ($(this).val() == "<>") {
$('.second-value').css("display", "block");
}
});
});
Also using show and hide instead of setting css.
Live Demo
$(document).ready(function () {
$('.condition-change').change(function () {
if ($(this).val() == "<>")
$('.second-value').show();
else
$('.second-value').hide();
});
});

Try,
$('.condition-change').change(function () {
if($(this).val().trim() === '<>') {
$('.second-value').show();
}
});
DEMO
Or
$('.condition-change').change(function () {
$('.second-value').toggle($(this).val().trim() === '<>');
});
DEMO I

// add .is(":checked") function to check whether "<>" value option is selected
$(document).ready(function () {
$('.condition-change').change(function () {
if($('select[name="SearchCondition"]').find('option[value="<>"]').is(":checked"))
{
$('.second-value').css("display", "block");
}
else
{
$('.second-value').css("display", "none");
}
});
});

Jquery Check all checkbox

Why does my check all button work once and doesn't work at 3rd click.
the check all button only works at firts click. I check the dom and its updating but the view does. What is the cause of the problem?
FIDDLE
jQuery('.sp_country').click(function () {
var checkbox = $(this).find(":checkbox"),
checked = checkbox.is(":checked");
checkbox.prop("checked", !checked);
});
jQuery('.sp_country input:checkbox').on('click', function (e) {
e.stopImmediatePropagation();
var checked = (e.currentTarget.checked) ? false : true;
e.currentTarget.checked = (checked) ? false : checked.toString();
});
jQuery('#bt_checkbox').click(function (e) {
e.stopImmediatePropagation();
if (jQuery(this).val() === 'Uncheck All') {
jQuery('#country input:checkbox').removeAttr('checked');
jQuery(this).val('Check All');
} else {
jQuery('#country input:checkbox').attr('checked', 'checked');
jQuery(this).val('Uncheck All');
}
});

fiddle Demo
Change
jQuery('#country input:checkbox').attr('checked', 'checked');
to
jQuery('#country input:checkbox').prop('checked', true);
Use .prop()
Read .prop() vs .attr()

Jquery multiple selectors with this

I've searched but can't find how to do this. I'm trying to make the elements with comment-modbox inside this hide and show:
$('.comment-wrapper').each(function (index) {
$(this, '.comment-modbox').mouseover(function () {
$('.comment-modbox').show();
});
$(this, '.comment-modbox').mouseout(function () {
$('.comment-modbox').hide();
});
});
This code just hides and shows all comment-modbox regardless as to if they are contained within this.
Thanks for any help!
Answer:
$('.comment-wrapper').each(function (index) {
$(this).mouseover(function () {
$('.comment-modbox', this).show();
});
$(this).mouseout(function () {
$('.comment-modbox', this).hide();
});
});

try this (jQuery("selector", context)...)
$('.comment-wrapper').each(function (index) {
$('.comment-modbox', this).mouseover(function () {
$(this).show();
});
$('.comment-modbox', this).mouseout(function () {
$(this).hide();
});
});
Second choice:
$('.comment-wrapper').each(function (index) {
var wrapper = this;
$('.comment-modbox', wrapper)
.mouseover(function () {
$(this).show();
})
.mouseout(function () {
$(this).hide();
});
});