CODEWITHSUNDEEP
javascriptjquery
user3582887
user3582887

Reputation: 413

Checkbox - run only if checked jquery

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>

Upvotes: 1

Views: 777

Answers (4)

Gildas.Tambo
Gildas.Tambo

Reputation: 22643

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

Upvotes: 2

user3984802
user3984802

Reputation:

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>

Upvotes: 0

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

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

Upvotes: 1

Mindastic
Mindastic

Reputation: 4121

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>

Upvotes: 0

Related Questions