checkbox javascript shows status

Question

what is problem with this script? i just want to show checkbox status in innerHTML that show "yes" after click on button, if it is checked, otherwise it shown "no".

<html>
<body>
<p id="demo"></p>

<input id="chkbox" type="checkbox" name="Terms" value="agree" ><br>
<input type="button" value="button" onClick="myFunction()" >

<script>
function myFunction() {

 var box = document.getElementById("chkbox");
 if(checkbox.checked)
  {
  var checked.value = "yes";
    var txt = checked.value;
 document.getElementById("demo").innerHTML = txt;
   }
   else if(checkbox.unchecked)
{
  var unchecked.value = "no";
  var txt = unchecked.value;
 document.getElementById("demo").innerHTML = txt;
}

   }
 </script>
 </body>

There's no checkbox.unchecked. If the checkbox.checked isn't true, then it's not checked -- you don't have to look at another property. — Barmar
– Barmar, Commented Dec 31, 2013 at 11:41
what is this var checked.value = "yes";? Your var box is used nowhere. too much mistakes... — Jai
– Jai, Commented Dec 31, 2013 at 11:41

Barmar · Accepted Answer · 2013-12-31 11:43:37Z

1

function myFunction() {
    var box = document.getElementById("chkbox");
    if(box.checked)
    {
        document.getElementById("demo").innerHTML = 'yes'
    }
    else
    {
        document.getElementById("demo").innerHTML = 'no';
    }
}

The problems in your code were:

You set the variable box, but then used checkbox.checked instead of box.checked.
You looked for checkbox.unchecked. There's no such property; if .checked isn't true, then the box is unchecked.
You tried to declare variables checked.value and unchecked.value. Variable names can't contain ., that's used for specifying object properties when accessing a variable whose value is an object.

answered Dec 31, 2013 at 11:43

Barmar

789k57 gold badges555 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Arun P Johny · Accepted Answer · 2013-12-31 11:50:19Z

1

There are multiple problems.

There is no variable with the name checkbox
The syntax var checked.value = "yes"; is invalid

Try

<input type="button" value="button" onClick="myFunction()">

then

function myFunction() {
    var box = document.getElementById("chkbox");
    box.value = box.checked ? "yes" : 'no';
    document.getElementById("demo").innerHTML = box.value;
}

Demo: Fiddle

Since jQuery tag is used include jQuery library in the page then

<input type="button" value="button" id="button">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

and

//dom ready handler
jQuery(function ($) {
    //cache the elements for future use
    var $chk = $('#chkbox'), // id-selector
        $demo = $('#demo');
    //click event handler
    $('#button').click(function () {
        //use is() and :checked-selector to check whether the checkbox is checked and use .text() to set the display text of the p element
        $demo.text($chk.is(':checked') ? 'yes' : 'no')
    })
})

Demo: Fiddle

edited Dec 31, 2013 at 11:50

answered Dec 31, 2013 at 11:43

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

1 Comment

Arun P Johny Over a year ago

@Barmar sorry might be something happened when I copied it to fiddle

Zaheer Ahmed · Accepted Answer · 2013-12-31 11:48:52Z

0

try:

You assigned element to box not to checkbox
There is nothing like checkbox.unchecked
var name checked.value is not correct format.

Here is code:

function myFunction() {
   var box = document.getElementById("chkbox");
   if (box.checked) {
    document.getElementById("demo").innerHTML = "yes";
   } else {
    document.getElementById("demo").innerHTML = "no";
   }
}

Here is working Demo

edited Dec 31, 2013 at 11:48

answered Dec 31, 2013 at 11:43

Zaheer Ahmed

28.7k12 gold badges77 silver badges113 bronze badges

Comments

Manish Jangir · Accepted Answer · 2013-12-31 11:42:55Z

0

Check this one

function myFunction() {
      if(document.getElementById('chkbox').checked) {
        alert("checked");
    } else {
       alert("not checked")
    }
    }

answered Dec 31, 2013 at 11:42

Manish Jangir

5,4576 gold badges49 silver badges79 bronze badges

1 Comment

user3148414 Over a year ago

I don't want javascript alert bro, i just want to show the status in innerHTML tag.

rajesh kakawat · Accepted Answer · 2013-12-31 11:48:39Z

0

try something like this,Shorthand

function myFunction(){
    var box = document.getElementById("chkbox").checked;
    document.getElementById("demo").innerHTML = box ? 'yes' : 'no';
}

answered Dec 31, 2013 at 11:48

rajesh kakawat

10.9k1 gold badge24 silver badges40 bronze badges

Collectives™ on Stack Overflow

checkbox javascript shows status

5 Answers 5

Comments

1 Comment

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related