How to bind to checkbox checked event - javascript

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 $

Related

How to select multiple arrays using check box in PHP? Also how to click and select single check box in PHP

In my code the selection of all items is possible
I am using a java script to check all and it properly works.But when check one of them from this table, I can't do it.One value is inserted.How it possible to select separately.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<SCRIPT language="javascript">
$(function () {
// add multiple select / deselect functionality
$("#selectall").click(function () {
$('.name').attr('checked', this.checked);
});
// if all checkbox are selected, then check the select all checkbox
// and viceversa
$(".name").click(function () {
if ($(".name").length == $(".name:checked").length) {
$("#selectall").attr("checked", "checked");
} else {
$("#selectall").removeAttr("checked");
}
});
});
</SCRIPT>
`
try below:
$(function () {
// add multiple select / deselect functionality
$("#selectall").click(function () {
$('.name').prop('checked', this.checked);
if (this.checked)
insertText();
});
// if all checkbox are selected, then check the select all checkbox
// and viceversa
$(".name").click(function () {
if ($(".name").length == $(".name:checked").length) {
$("#selectall").prop("checked", "checked");
} else {
$("#selectall").prop("checked", false);
}
insertText();
});
function insertText()
{
var arr = [];
$('.name:checked').each(function() {
arr.push($(this).val());
})
$('.text').val($arr.join(','));
}
});

Getting localStorage and adding class to divs

I have a question that is quite confusing.
Everytime I check a "checkbox", it gets the closest "div" and add the class "hilight" and "marked" and set an Item to LocalStorage called "marking".
When I switch from div 1 to 2, I remove the class "hilight", but i keep the class "marked".
I'm trying to get the LocalStorage, and add class "hilight" again to divs that has "marked"
JS Fiddle: http://jsfiddle.net/b4KgV/
HTML
1
2
<button class="1st">show 1st</button>
<button class="2nd">show 2nd</button>
JS
localStorage.clear();
$(document).on('click', ':checkbox', function () {
if ($(this).is(':checked')) {
$(this).closest("div").addClass('hilight marked');
localStorage.setItem("marking","yes");
}
else {
$(this).closest("div").removeClass('hilight marked');
}
});
$(".1st").on('click', function() {
$(".second").css('display','none');
$(".second").removeClass('hilight');
$(".first").css('display','block');
});
$(".2nd").on('click', function() {
$(".first").css('display','none');
$(".first").removeClass('hilight');
$(".second").css('display','block');
});
if (localStorage.getItem("marking")) {
$(".marked").closest("div").addClass('hilight');
};
Thx.
Localstorage goes by key:value as you know, I tried to keep them separate.
Try this fiddle
http://jsfiddle.net/b4KgV/11/
$(document).on('click', ':checkbox', function () {
var div = $(this).closest("div").attr("id")
if ($(this).is(':checked')) {
$(this).closest("div").addClass('hilight marked');
localStorage.setItem(div, true);
} else {
$(this).closest("div").removeClass('hilight marked');
localStorage.setItem(div, false);
}
});
$(".1st").on('click', function () {
console.log("test")
if (localStorage.getItem("firstDiv") == "true") {
$(".first").closest("div").addClass('hilight');
};
$(".second").css('display', 'none');
$(".second").removeClass('hilight');
$(".first").css('display', 'block');
});

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

If this is checked on click undisable btn but if its unchecked again disable it

is there a better way to do this.
$('#termsAccept[type="checkbox"]').click(function() {
if ($(this).is(':checked')) {
$('#qBtn').prop('disabled',false);
}
$('#termsAccept[type="checkbox"]').click(function() {
if ($(this).not(':checked')) {
$('#qBtn').prop('disabled',true);
}
I want to combine the two into one click function
You can do
$('#termsAccept[type="checkbox"]').click(function() {
$('#qBtn').prop('disabled', !this.checked);
});
As #Karl-André Gagnon's suggestion, you should use change event for your checkbox instead of click:
$('#termsAccept').change(function() {
$('#qBtn').prop('disabled', !this.checked);
});
As well as id is unique so you just need #termsAccept.
$('#termsAccept[type="checkbox"]').click(function() {
if ($(this).is(':checked')) {
$('#qBtn').prop('disabled',false);
}
else {
$('#qBtn').prop('disabled',true);
}
});

Enable CheckBoxList using CheckBox? - ASP.NET

I am having trouble with my code, I was able to implement it using code behind but it was not good as I have sliding panel (using jQuery) which were interfered with on post back.
The CheckBoxList is disabled by default with no auto postback.
I want the CheckBoxList to become enables if the CheckBox is checked.
Currently, I have this code:
$("#BizAppsCheckBox").click(function () {
if (this.checked)
$('#BizAppsCheckBoxList').removeAttr('disabled');
else
$('#BizAppsCheckBoxList').attr('disabled', 'disabled');
});
How can I fix this issue?
Best working solution for me, thanks to the answers:
$(document).ready(function () {
if ($("#BizAppsCheckBox").prop('checked') == false) {
$('#BizAppsCheckBoxList *').prop('disabled', true);
}
else {
$('#BizAppsCheckBoxList *').prop('disabled', false);
}
$("#BizAppsCheckBox").click(function () {
if (this.checked)
$('#BizAppsCheckBoxList *').prop('disabled', false);
else
$('#BizAppsCheckBoxList *').prop('disabled', true) &
$('#BizAppsCheckBoxList *').prop('checked', false);
});
});
Try this :
You should use the ClientID cuz asp.net does provide different ID ( when under container)
$("#<%=BizAppsCheckBox.ClientID%> ").click(function () {
if (this.checked)
$('#<%=BizAppsCheckBoxList.ClientID%>').prop('disabled',false);
else
$('#<%=BizAppsCheckBoxList.ClientID%>').prop('disabled', true);
});
edit
$("#<%=BizAppsCheckBox.ClientID%>").click(function () {
if (this.checked)
$('#<%=BizAppsCheckBoxList.ClientID%> *').prop('disabled', false);
else
$('#<%=BizAppsCheckBoxList.ClientID%> *').prop('disabled', true);
});
Use prop instead of attr, if ClientIDMode is not static then use ClientID of server controls
$("#<%= BizAppsCheckBox.ClientID %>").click(function () {
if (this.checked)
$('#<%= BizAppsCheckBoxList.ClientID %>').prop('disabled', true);
else
$('#<%= BizAppsCheckBoxList.ClientID %>').prop('disabled', false);
});
this will do the trick
$("#<%=BizAppsCheckBox.ClientID%>").click(function () {
$('#<%=BizAppsCheckBoxList.ClientID%>').prop('disabled',!this.checked);
});
or
$("#BizAppsCheckBox").click(function () {
$('#BizAppsCheckBoxList').prop('disabled', !this.checked);
});
try using .on()
$("document").on("click","#<%=BizAppsCheckBox.ClientID%>",function(){
$('#<%=BizAppsCheckBoxList.ClientID%>').prop('disabled',!this.checked);
});

Categories

Resources