Checkbox on change is not firing - javascript

I got a check box on the html page as:
<input type="checkbox" id="chk-info" name="chk-info" />
when I try to write an on change event and run, it's not getting fired. Instead if, I place an alert message before the function it is firing fine.
alert('blah');
var sth = function(){
function m(){
$("input[type='checkbox']").click(function (e) {
if ($(this).is(':checked')) {
alert("true");
} else {
alert("false");
}
});
}
return{ m:m};
};
I have tried using the id selector as well, but with not much luck.
Can anyone help me in pointing where the issue is?
EDIT: When I place the check box checked function outside the above function it works well with 'onchange' event attached on the <input> tag

Put the onclick event of the checkbox on page load.
$(document).ready(function () {
$("input[type='checkbox']").click(function (e) {
if ($(this).is(':checked')) {
alert("true");
} else {
alert("false");
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input type="checkbox" id="chk-info" name="chk-info" />
<label for="chk-info">label</label>

$(document).ready(function () {
$("input[type='checkbox']").click(function (e) {
if ($(this).is(':checked')) {
$(this).val("true");
} else {
$(this).val("false");
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input type="checkbox" id="chk-info" name="chk-info" />
<label for="chk-info">label</label>

Related

How to fire change event in jQuery

I have a UserControl placed in aspx page in asp.net. In this UserControl, I have a RadioButtonList and on change of RadioButtonList item, I want to execute the below jQuery function.
$('#rdlUser').change(function (e) {
alert("change function");
var radioBtnId = this.id;
var $this = $(this);
radconfirm('Are you sure you want to take leave?', function(arg){
if (arg == true) {
alert("User wants to take leave");
}
else {
alert("User doesn't want to take leave");
}
});
});
For execute an event you can use trigger("eventname") function with JQuery.
Example
$("#id").keypress(function(){
console.log("input keypress");
});
$("#btn").click(function(){
$("#id").trigger("keypress");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="id"> <button id="btn">Trigger keypress event</button>
UPDATE
With generated HTML you can't trigger event by using $("#generatedid") because element is not in the DOM at the first load.
You can use :
$(document).on("change",".your-radio-button-class",function(){
//Make a test on the value of the select radio
if($(this).val() == "connected")
{
}
else
{
}
});
Simply you can do like this:
$(document).ready(function () {
$('#rdlUser input').change(function () {
alert($(this).val());
});
});

Is it possible to prevent page change from Href on specific conditions?

As the title said, Is it possible to prevent page change from Href for a specific condition.
For example; if i have a div
<div href="#nextpage.html">Click me</div>
Is it possible to set a if statement to only allow a certain condition for this div to go to the nextpage??
For example
var canclick ="can_click";
if(canclick=="can_click"){
// Then allow the href to process to the next page.
} else {
// Have an alert up to say that the user can not proceed to the next page. And prevent the href to move to the next page.
}
Edit
$("#anchor").on('click', function(e) {
alert("clicked2");
})
Edit:
The only way the click event is
function clicked(){
alert(detected);
}
Edit:
I also just tried these. None of the alert gets called.
if($("#anchor").data('clicked'))
{
alert("again clicked");
}
$("#anchor").on('click', function(e) {
var $this = $(this);
if($this.data('clicked')) {
alert("clicked");
}
})
Here is a very simple example. The click function is not triggered if the initial condition is met (i = 0). Then, click the link again, and i != 1, so the normal <a> navigation is allowed to proceed.
i = 0;
$(document).on('click', 'a', function(e) {
if (i == 0) {
e.preventDefault();
alert('i = 0');
} else {
alert('i = ' + i);
}
i++;
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Stackoverflow
If you are using jQuery you do something similar:
$(document).ready(function() {
$("a").click(function(e) {
if ($("#enable").is(":checked")) {
window.location = e.href;
} else {
e.preventDefault();
}
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<input id="enable" name="check" type="radio" value="Enable" />Enable
<br>
<input id="disable" name="check" type="radio" value="Disable" />Disable
<br/>
Stackoverflow
</body>

Checkbox fire a function if checked and a different function if not checked

Hi i have got a checkbox and when i click it and check the box a function runs, which works just how i want it to.. now i want to run a DIFFERENT function if it is checked off but it is just running the same function everytime.
<input type="checkbox" class="no-custom" onclick="CheckBox()">
function CheckBox() {
$("#emailMain").css({"display": "none"});
$("#emailSame").css({"display": "inline"});
var Mainemail = Customer().email['#text']();
Contact().email = Mainemail;
EmailHolder(Mainemail);
}
Any ideas in the best way to sort this?
Firstly, if you've included jQuery in your page you should use it to attach your events as its a better separation of concerns. You can then use the checked property of the element to determine which function to call:
<input type="checkbox" class="no-custom" />
$('.no-custom').change(function() {
if (this.checked) {
// do something...
}
else {
// do something else...
}
});
Add an ID to the checkbox:
<input type="checkbox" id="the-checkbox" class="no-custom" onclick="CheckBox()">
Then add an event listener for when it changes:
$(function() {
$('#the-checkbox').change(function() {
if($(this).is(':checked')) {
oneFunction();
}
else {
anotherFunction();
}
});
function oneFunction() {
}
function anotherFunction() {
}
});
You can easily check if the checkbox is checked using jQuery is.
<input type="checkbox" class="no-custom" onclick="CheckBox(this)">
function CheckBox(cb) {
if ($(cb).is(":checked")) {
alert("Checked");
CheckedFunction();
} else {
alert("Unchecked");
UncheckedFunction
}
}

Function not called for first click on checkbox

On checking a checkbox, I need to call a function. The first time I check the checkbox the function is not called whereas if I check it again, the function is successfully called. Please help me solve this issue. Here I have showed the part of my HTML and the function.
<input type="checkbox" id="checkThen" onchange="LoadContactDetails()">
function LoadContactDetails() {
$("#checkThen").change(function () {
if ($(this).is(":checked")) {
// ..........
}
else {
// ..........
}
});
}
If you want to attach inline event handler use ,
<input type="checkbox" id="checkThen" onchange="LoadContactDetails(this)" />
function LoadContactDetails(element) {
alert(element.checked);
}
DEMO
OR
If you want to use jQuery event handler use,
<input type="checkbox" id="checkThen" />
$(function() {
$("#checkThen").change(function () {
if (this.checked) {
// checked
}
else {
// unchecked
}
});
});
DEMO
You just bind the change event first time you clicked.
Remove the onchange attribute, then just bind the change event at the dom ready callback.
html:
<input type="checkbox" id="checkThen">
js:
$(function() {
$("#checkThen").change(function () {
if ($(this).is(":checked")) {
..........
}
else {
..........
}
});
});
$(document).ready(function(){
$("#checkThen").change(function () {
if ($(this).is(":checked")) {
..........
}
else {
..........
}
});
});
Remove the onchange attribute in function LoadContactDetails().
html:
<input type="checkbox" id="checkThen" onchange="LoadContactDetails()">
js:
function LoadContactDetails() {
if ($('#checkThen').is(":checked")) {
alert('checked');
}
else {
alert('Not-checked');
}
}
Demo
**Or**
You just bind the change event first time you clicked.
Remove the onchange attribute, then just bind the change event at the dom ready callback.
Html:
<input type="checkbox" id="checkThen">
.js:
$(function() {
$("#checkThen").change(function () {
if ($(this).is(":checked")) {
alert('checked');
}
else {
alert('Not checked');
}
});
});
Demo
Hope it should helpful for you.
In the first click you are binding an event to the checkbox. And from 2nd click onwards the callback function gets fired, and a new event binding will also happen. You can make it work by simply changing the code as follows,
HTML
<input type="checkbox" id="checkThen" >
Javascript
$(document).ready(function(){
$("#checkThen").change(function () {
if (this.checked) {
// checked
}
else {
// unchecked
}
});
});
Please follow this article on getting an idea about callback functions
Try using "Click" instead of "change. It might work.
Here you bind change event every time when function LoadContactDetails() call.
(It's not correct way)
You can just call your code directly inside your function.
function LoadContactDetails() {
if ($('#checkThen').is(":checked")) {
alert('checked');
} else {
alert('Not-checked');
}
}
Working Fiddle
i tried all the solutions given here but it did not work for me Finally, I found an easy way to solve this problem.I hope this will helpful for you also.
function LoadContactDetails() {
$("#checkThen").change(function () {
if ($(this).is(":checked")) {
alert('hello')
}
else {
alert('something wronge')
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="checkbox" id="checkThen" onMouseDown="LoadContactDetails()"/>

Need to enable/disable a button on click of checkbox

I am trying to disable a order button when the page loads and enable it when one checks the Terms and condition checkbox. I have it working where the order button is disabled when the page loads but on the click of checkbox the button doesnt get enabled. Here is my code. Can anyone help me identify the problem
<input type="checkbox" id="checkbox1" name="checkbox1" class="required" />Please read the Terms and Conditions
Jquery Code
var j$ = jQuery.noConflict();
j$(document).ready(function(){
alert("Hi");
if(j$('input[name="checkbox1"]').not(":checked"))
{
j$('input[name="Order"]').attr('disabled', 'disabled');
}
else
{
j$('input[name="Order"]').removeAttr('disabled');
}
j$('#checkbox1').change(function(){
if(j$('input[name="checkbox1"]').is(":checked")
{
j$('input[name="Order"]').attr('disabled', 'disabled');
}
else
{
j$('input[name="Order"]').removeAttr('disabled');
}
}
});
Thanks
Prady
The code you provided had some missing ( and {, here is an updated version with some changes to handle the checkbox state properly:
var j$ = jQuery.noConflict();
j$(document).ready(function() {
var checkbox1 = j$('#checkbox1');
var order = j$('input[name="Order"]');
var verifyChecked = function() {
if (checkbox1.is(":checked") === false) {
order.attr('disabled', 'disabled');
} else {
order.removeAttr('disabled');
}
};
verifyChecked();
checkbox1.change(verifyChecked);
});
Here is a jsfiddle with it working:
http://jsfiddle.net/7uRf6/4/
You have missed a closing parenthesis
if(j$('input[name="checkbox1"]').is(":checked")
should be
if(j$('input[name="checkbox1"]').is(":checked"))
Also you can use an id selector instead of this attribue selector.
And if you want to enable the button when the checkbox is checked you have to
if(!j$('input[name="checkbox1"]').is(":checked"))
in your change event,
if(j$('input[name="checkbox1"]').is(":checked")
it should be
if(j$('input[name="checkbox1"]').not(":checked")
I suggest you to create a function to check it.
var j$ = jQuery.noConflict();
j$(document).ready(function(){
ToggleButton();
j$('#checkbox1').change(ToggleButton);
});
function ToggleButton()
{
if(j$('input[name="checkbox1"]').not(":checked"))
{
j$('input[name="Order"]').attr('disabled', 'disabled');
}
else
{
j$('input[name="Order"]').removeAttr('disabled');
}
}
<script src="jquery.js"></script>
<script>
$(document).ready(function (){
$('#ch').click(
function (){
if($(this).is(':checked')){
$('#bt').attr('disabled','disabled');
}
else {
// remove
$('#bt').removeAttr('disabled');
}
}
)
})
</script>
<input type="button" value="button" id="bt"/>
<input type="checkbox" id="ch"/>

Categories