jQuery checkbox change and click event

0 votes
$(document).ready(function() { 
    //set initial state. 
    $('#textbox1').val($(this).is(':checked')); 
  
    $('#checkbox1').change(function() { 
    $('#textbox1').val($(this).is(':checked')); 
}); 

$('#checkbox1').click(function() { 
  if (!$(this).is(':checked')) { 
    return confirm("Are you sure?"); 
      } 
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<input type="checkbox" id="checkbox1"/><br /> 
<input type="text" id="textbox1"/>

Here .change() updates the textbox value with the checkbox status. I use .click() to confirm the action on uncheck. If the user selects cancel, the checkmark is restored but .change() fires before confirmation which leaves things in an inconsistent state and the textbox says false when the checkbox is checked. How can I deal with the cancellation and keep textbox value consistent with the check state?

Feb 23, 2022 in Java-Script by Soham
• 9,700 points
39,929 views

1 answer to this question.

0 votes

Have shared an approach which will add the benefit of firing when a label associated with a checkbox is clicked. 

$(document).ready(function() { 
        //set initial state. 
        $('#textbox1').val(this.checked); 

        $('#checkbox1').change(function() { 
          if(this.checked) { 
              var returnVal = confirm("Are you sure?"); 
              $(this).prop("checked", returnVal); 
    } 
    $('#textbox1').val(this.checked); 
    });
});

answered Feb 23, 2022 by Aditya
• 7,680 points

Related Questions In Java-Script

0 votes
1 answer

jQuery AJAX fires error callback on window unload - how do I filter out unload and only catch real errors?

Hello, In the error callback or $.ajax you have three ...READ MORE

answered Apr 27, 2020 in Java-Script by Niroj
• 82,880 points
3,705 views
0 votes
1 answer

How to select and manipulate CSS pseudo-elements such as ::before and ::after using jQuery?

Hii @kartik, Here is the way to access ...READ MORE

answered May 18, 2020 in Java-Script by Niroj
• 82,880 points
6,050 views
0 votes
3 answers
0 votes
1 answer

How jQuery event to trigger action when a div is made visible?

Hello @kartik, You could always add to the ...READ MORE

answered Aug 25, 2020 in Java-Script by Niroj
• 82,880 points
9,288 views
0 votes
1 answer

How to change an element's ID with jQuery?

Hello @kartik, Your syntax is incorrect, you should ...READ MORE

answered Aug 25, 2020 in Java-Script by Niroj
• 82,880 points
3,509 views
0 votes
0 answers

event.preventDefault() vs. return false

When I want to prevent other event ...READ MORE

Jun 10, 2022 in JQuery by gaurav
• 23,260 points
713 views
0 votes
1 answer

What is jQuery?

Hey, jQuery is a fast and concise JavaScript ...READ MORE

answered Feb 14, 2020 in JQuery by kartik
• 37,510 points
992 views
0 votes
1 answer

Uncaught TypeError: Cannot read property 'msie' of undefined - jQuery tools

Hello, Use the following script tag in your ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,880 points
14,248 views
0 votes
1 answer

Uncaught Error: Bootstrap's JavaScript requires jQuery

Hello @kartik, You have provided wrong order for ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,880 points
22,437 views
0 votes
1 answer

Open a URL in a new tab (and not a new window)

Nothing an author can do can choose ...READ MORE

answered Feb 23, 2022 in Java-Script by Aditya
• 7,680 points
2,667 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP