How to get value of checkbox on check or uncheck without submit form
Question
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
solution1
4 ACCPTED 2015-09-14 11:38:15
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.
solution2
1 2015-09-14 11:33:54
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');
}
solution3
1 2015-09-14 11:34:33
Maybe:
$('.yourcheckbox').click(function() {
if( $('.yourcheckbox').is(":checked") ) {
do stuff
} else {
do other stuff
}
});
solution4
1 2015-09-14 11:41:14
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>
solution5
0 2015-09-14 11:42:04
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
{
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.