if checkbox is checked, do this

Question

When I check a checkbox, I want it to turn <p> #0099ff.

When I uncheck the checkbox, I want it to undo that.

Code I have so far:

$('#checkbox').click(function(){
    if ($('#checkbox').attr('checked')) {
        /* NOT SURE WHAT TO DO HERE */
    }
}) 

Incorruption

"... when it's unchecked, to disable that same function." - the function passed to .click() is invoked on the click event. Therefore I don't understand what you mean by "enable" and "disable". If the checkbox is checked you can invoke function a(). But you must write the reverse function to invoke when the checkbox is not checked. I'm confused. – Herwin

You can, of course, .bind() and .unbind() events to another element based on the checkbox state. Is that what you're after? – Herwin

Sorry for spamming but I've made an example of what I'm talking about. – Herwin

I know this is an old post, but now jQuery uses prop() for what this question wanted to use attr() for; the prop() method had not been created back then. The answers about this.checked are probably still useful, however. – Tula

Answer 1

I would use .change() and this.checked:

$('#checkbox').change(function(){
    var c = this.checked ? '#f00' : '#09f';
    $('p').css('color', c);
});

--

On using this.checked
Andy E has done a great write-up on how we tend to overuse jQuery: Utilizing the awesome power of jQuery to access properties of an element. The article specifically treats the use of .attr("id") but in the case that #checkbox is an <input type="checkbox" /> element the issue is the same for $(...).attr('checked') (or even $(...).is(':checked')) vs. this.checked.

Herwin

Answer 2

Try this.

$('#checkbox').click(function(){
    if (this.checked) {
        $('p').css('color', '#0099ff')
    }
}) 

Sometimes we overkill jquery. Many things can be achieved using jquery with plain javascript.

Dippold

Answer 3

It may happen that "this.checked" is always "on". Therefore, I recommend:

$('#checkbox').change(function() {
  if ($(this).is(':checked')) {
    console.log('Checked');
  } else {
    console.log('Unchecked');
  }
});

Opposable

In my case, i just changed to $(':checkbox') in order to make it work ;) – Uno

Answer 4

it's better if you define a class with a different colour, then you switch the class

$('#checkbox').click(function(){
    var chk = $(this);
    $('p').toggleClass('selected', chk.attr('checked'));
}) 

in this way your code it's cleaner because you don't have to specify all css properties (let's say you want to add a border, a text style or other...) but you just switch a class

Tnt

+1 for generic solution. There is no reason to do $('#checkbox').attr('checked'), however, if we know that #checkbox is a checkbox (if not, the ID is rather misleading). this.checked will do. – Herwin

@Herwin @Tnt +1 Thanks for the tip! I had never seen toggleClass with switch. I'm deleting my post as it's useless. Sorry to be so picky, but I think this answer would be 100% perfect without '#checkbox' being selected twice: maybe use $(this) instead? Or jensgram's solution? – Peddada

@Peddada of course you can cache your element before using (see the code now). this.checked is even faster than $(..).attr('checked') – Tnt

Answer 5

I found out a crazy solution for dealing with this issue of checkbox not checked or checked here is my algorithm... create a global variable lets say var check_holder

check_holder has 3 states

1. undefined state
2. 0 state
3. 1 state

If the checkbox is clicked,

$(document).on("click","#check",function(){
    if(typeof(check_holder)=="undefined"){
          //this means that it is the first time and the check is going to be checked
          //do something
          check_holder=1; //indicates that the is checked,it is in checked state
    }
    else if(check_holder==1){
          //do something when the check is going to be unchecked
          check_holder=0; //it means that it is not checked,it is in unchecked state
    }
     else if(check_holder==0){
            //do something when the check is going to be checked
            check_holder=1;//indicates that it is in a checked state
     }
});

The code above can be used in many situation to find out if a checkbox has been checked or not checked. The concept behind it is to save the checkbox states in a variable, ie when it is on,off. i Hope the logic can be used to solve your problem.

Casanova

The solution is indeed crazy but not in a good way. Yes global variables can help you solve a problem today but they will almost certainly become a problem for you tomorrow. Try to avoid them where possible, which is 99 % of the time. They make it impossible to reason about your code without worrying about the global state. One global variable might look innocent but quickly it becomes tens then hundreds. Been there, seen that and it's not pretty. – Ahumada

Answer 6

Check this code:

<!-- script to check whether checkbox checked or not using prop function -->
<script>
$('#change_password').click(function(){
    if($(this).prop("checked") == true){ //can also use $(this).prop("checked") which will return a boolean.
        alert("checked");
    }
    else if($(this).prop("checked") == false){
        alert("Checkbox is unchecked.");
    }
});
</script>

Tice

Answer 7

$('#checkbox').change(function(){
   (this.checked)?$('p').css('color','#0099ff'):$('p').css('color','another_color');
});

Djakarta

Answer 8

Probably you can go with this code to take actions as the checkbox is checked or unchecked.

$('#chk').on('click',function(){
    if(this.checked==true){
      alert('yes');
    }else{
      alert('no');
    }
});

Methodical

Answer 9

I would do :

$('#checkbox').on("change", function (e){ 

    if(this.checked){

      // Do one thing 

    }

    else{

     // Do some other thing

    }

});

See : https://www.w3schools.com/jsref/prop_checkbox_checked.asp

Din

Answer 10

Optimal implementation

$('#checkbox').on('change', function(){
    $('p').css('color', this.checked ? '#09f' : '');
});

---

Demo

$('#checkbox').on('change', function(){
    $('p').css('color', this.checked ? '#09f' : '');
});

<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<input id="checkbox" type="checkbox" /> 
<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<p>
    Ut enim ad minim veniam, quis nostrud exercitation ullamco
    laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu
    fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est
    laborum.
</p>

Trishatriskelion

Answer 11

Why not use the built in events?

$('#checkbox').click(function(e){
    if(e.target.checked) {
     // code to run if checked
        console.log('Checked');

     } else {

     //code to run if unchecked
        console.log('Unchecked');
     }
});

Shaver