CODEWITHSUNDEEP
javascriptjquerycheckbox
user3148414
user3148414

Reputation: 7

checkbox javascript shows status

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>

Upvotes: 0

Views: 334

Answers (5)

Arun P Johny
Arun P Johny

Reputation: 388316

There are multiple problems.

  1. There is no variable with the name checkbox
  2. 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

Upvotes: 1

Zaheer Ahmed
Zaheer Ahmed

Reputation: 28528

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

Upvotes: 0

rajesh kakawat
rajesh kakawat

Reputation: 10896

try something like this,Shorthand

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

Upvotes: 0

Barmar
Barmar

Reputation: 780698

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.

Upvotes: 1

Manish Jangir
Manish Jangir

Reputation: 5437

Check this one

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

Upvotes: 0

Related Questions