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