2

I want to change value when someone check or uncheck checkbox. Here is my code:

<?php 
    if($params['status'] == "2"){ 
?>
        <div class="pull-right" id="confirm-ship">
            <input type="checkbox" class="chkone"><br>
            if(checkbox == check){
                <span>Confirmed</span>
            }else{
                <span>Not Confirmed</span>
            }
        </div>
<?php
     }
?>

I want to show message confirmed or not confirmed when someone click on checkbox without submit a page or reload a page. Is it possible, anyone help me?

I just added below code on above scenario just for giving an idea.

if(checkbox == check){
    <span>Confirmed</span>
}else{
    <span>Not Confirmed</span>
}

5 Answers 5

4

First you will need to set an event listener to listen for the change event and trigger a function.

If you give your elements id's you can make things easier to target that element.

You will also want to place your javascript into <script> tags. Some people place them in the body of the page or at the very bottom. Me personally, I like to place my in the <head> tag as using window.onload will only attempt to getElementById() when the page has loaded.

window.onload=function(){ // Trigger when the page is ready
  //Set change event 
  document.getElementById('Confirmation').addEventListener('change', Confirm, false);
}

function Confirm(){
  var Confirmation=document.getElementById('Confirmation').checked;
  var Message;
  if(Confirmation){
    Message="Confirmed";
  }else{
    Message="Not Confirmed"
  }
  document.getElementById('Result').innerHTML=Message;
}
<input type="checkbox" id="Confirmation" />
<span id="Result">Not Confirmed</span>

If you have any questions about the above source code please leave a comment below and I will get back to you as soon as possible.

2
  • @MuhammadAwais You are very welcome. If you have any questions feel free to ask and I will display more detail/explanation if needed.
    – NewToJS
    Sep 14, 2015 at 11:44
  • Sounds good. For now, it's perfectly working. Sure, net i will let you know if any query about JS. Thank you so much for your kind response. Sep 15, 2015 at 4:20
1

The .checked property of a checkbox DOM element will tell give you the checked state of the element.

   <input id="chktype" type="checkbox" class="chkone"><br>

  if(document.getElementById('chktype').checked) {
       alert('Checked');
    } else {
        alert('Not Checked');
    }
1

Maybe:

$('.yourcheckbox').click(function() {
    if( $('.yourcheckbox').is(":checked") ) {
       do stuff
    } else {
       do other stuff
    }
});
1

You can do it by using jQuery. Include the jQuery file in your head section:

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

    <?php 

     if($params['status'] == "2"){ ?>
      <div  class="pull-right" id="confirm-ship">
      <input type="checkbox" class="chkone"><br>
      <span></span>
      </div>
    <?php  }
      ?>
      <script>
          $('.chkone').change(function(){

      if($(this).prop('checked')==true)
      {
        $('span').html('Confirmed');  
      }
      else
      {
          $('span').html('Not Confirmed');
      }
     });
    </script>
1
  • its simple you can try this Sep 14, 2015 at 11:47
0

Just change your code :

<div class="pull-right" id="confirm-ship">
<input type="checkbox" class="chkone" id="chkone"><br>

Use javascript :

$('.chkone').click(function(){

        if($(this).is(':checked'))
        {
            //if checked do something
        }
        else
        {

        }
    });

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.