Checkbox - run only if checked jquery

Question

I have been looking at a lot of examples on how to accomplish this but cannot get it to work. I just want to put a simple if statement within my javascript, and when I add the if, it breaks? I am getting test to report true when checked, and false when unchecked, so what am I missing? - Novice user, so if this a convoluted way to do this, I apologize.

NOT WORKING:

<script>
$('input[name="1"]').click(function() {
   var test = $(this).prop('checked'); //{
     if(test == "true")
     {
      var alert_id = $(this).val();
      var key = $('#key').val();
      $.ajax({  
       type: "POST",  
        url: "functions/database_write.php",
       data: "id1="+alert_id+"&key="+key+"&test="+test,
       success: function(resp){  
             $( ".pop-div" ).slideDown(100,"linear");
            setTimeout(function(){
             $( ".pop-div" ).slideUp(100,"linear");
             }, 1000);
             //alert(resp);
        },  
        error: function(e){  
        alert('Error: ' + e);  
      }
    }    
  })
 });
 </script>

But works, but with every click when the function is written like:

<script>
$('input[name="1"]').click(function() {
   var test = $(this).prop('checked'); //{
     //if(test == "true")
     //{
      var alert_id = $(this).val();
      var key = $('#key').val();
      $.ajax({  
       type: "POST",  
        url: "functions/database_write.php",
       data: "id1="+alert_id+"&key="+key+"&test="+test,
       success: function(resp){  
             $( ".pop-div" ).slideDown(100,"linear");
            setTimeout(function(){
             $( ".pop-div" ).slideUp(100,"linear");
             }, 1000);
             //alert(resp);
        },  
        error: function(e){  
        alert('Error: ' + e);  
      }
    //}    
  })
 });
 </script>

What do you mean it breaks? What kind of output are you seeing, if any? — dave
– dave, Commented Sep 5, 2014 at 17:55

Gildas.Tambo · Accepted Answer · 2014-09-05 18:28:06Z

DEMO:

Change if(test == "true") to if(test) or if(test === true) or to if(this.checked)

HTML:

<label for=input>Click Me</label>
<input id=input type=checkbox  name=1 />

SCRIPT:

    $('input[name="1"]').click( function () {
        var test = $(this).prop('checked');
        if(test){
          alert("checkbox checked");
          var alert_id = $(this).val();
          var key = $('#key').val();
      $.ajax({  
       type: "POST",  
        url: "functions/database_write.php",
       data: "id1="+alert_id+"&key="+key+"&test="+test,
       success: function(resp){  
             $( ".pop-div" ).slideDown(100,"linear");
            setTimeout(function(){
             $( ".pop-div" ).slideUp(100,"linear");
             }, 1000);
        },  
        error: function(e){  
        alert('Error: ' + e);  
      }
  });
     }       
 });

NOTE:

If one of the operands is Boolean, the Boolean operand is converted to 1 if it is true and +0 if it is false.

you can add console.log(test); to see the value of test.

What you were doing was comparing true == "true" a boolean with a string

Read Using the Equality Operators

Bhojendra Rauniyar · Accepted Answer · 2014-09-05 18:00:08Z

1

The key problem is here that you're using true as string which is why it's not working:

So, use it as boolean:

if(test == true) // not "true"

You can also use like below:

if(test) // it says if test is true

OR,

if(test == 1) // 1 for true 0 for false

answered Sep 5, 2014 at 18:00

Bhojendra Rauniyar

86.1k36 gold badges179 silver badges241 bronze badges

Comments

Mindastic · Accepted Answer · 2014-09-05 17:54:07Z

Try doing:

<script>

    $('input[name="1"]').click(function() {
       //var test = $(this).prop('checked'); //{
         if(jQuery(this).is(":checked"))
         {
          var alert_id = $(this).val();
          var key = $('#key').val();
          $.ajax({  
           type: "POST",  
            url: "functions/database_write.php",
           data: "id1="+alert_id+"&key="+key+"&test="+test,
           success: function(resp){  
                 $( ".pop-div" ).slideDown(100,"linear");
                setTimeout(function(){
                 $( ".pop-div" ).slideUp(100,"linear");
                 }, 1000);
                 //alert(resp);
            },  
            error: function(e){  
            alert('Error: ' + e);  
          }
        }    
      })
     });
     </script>

user3984802 · Accepted Answer · 2014-09-05 18:00:29Z

Try it like this:

<script>
$('input[name="1"]').click(function() {
   var test = $(this).prop('checked'); //{

      console.log(test);// to see whats is in test

     if(test)
     {
      var alert_id = $(this).val();
      var key = $('#key').val();
      $.ajax({  
       type: "POST",  
        url: "functions/database_write.php",
       data: "id1="+alert_id+"&key="+key+"&test="+test,
       success: function(resp){  
             $( ".pop-div" ).slideDown(100,"linear");
            setTimeout(function(){
             $( ".pop-div" ).slideUp(100,"linear");
             }, 1000);
             //alert(resp);
        },  
        error: function(e){  
        alert('Error: ' + e);  
      }
    }    
  })
 });
 </script>

Collectives™ on Stack Overflow

Checkbox - run only if checked jquery

4 Answers 4

DEMO:

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related