HTML checkbox not working

Question

I want to display and hide a table using a checkbox. The table appears and disappears with no problem . But the checkbox is not getting checked . I have Jquery v1.8.2 . i have the following code :

<html>
<head>
    <title></title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $('#checkbox').toggle(function() {
            document.getElementById('table').style.display = "inline";
        }, function() {
            document.getElementById('table').style.display = "none";
        });
    </script>
</head>
<body>
    <form action="" method="POST" enctype="multipart/form-data">
    <input type="checkbox" id="checkbox">
    <br />
    <table id="table" style="display: none;">
        <tr>
            <td>
                <input type="file" name="file">
                <input type="submit" name="upload" value="upload">
            </td>
        </tr>
    </table>
    </form>
</body>
</html>

Adil Shaikh · Accepted Answer · 2013-05-17 11:36:05Z

5

Try this way -

$('#checkbox').change(function () {
    if ($(this).is(":checked")) {
        $('#table').show();
    } else {
        $('#table').hide();
    }
});

Working demo --> http://jsfiddle.net/pmNAe/

answered May 17, 2013 at 11:36

Adil Shaikh

44.8k17 gold badges95 silver badges112 bronze badges

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

Comments

Arun P Johny · Accepted Answer · 2013-05-17 11:36:45Z

2

Try

$('#checkbox').click(function () {
    if (this.checked) {
        $('#table').show();
    } else {
        $('#table').hide();
    }
});

Demo: Fiddle

answered May 17, 2013 at 11:36

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Comments

GautamD31 · Accepted Answer · 2013-05-17 11:35:51Z

0

You can Try like

$('#checkbox').click( 
    var my_dis = document.getElementById('table').style.display;
     if(my_dis == 'inline')
        document.getElementById('table').style.display = "none";
     else   //if(my_dis == 'none')
        document.getElementById('table').style.display = "inline";       
);

answered May 17, 2013 at 11:35

GautamD31

28.8k10 gold badges66 silver badges86 bronze badges

Comments

Jorge Loureiro · Accepted Answer · 2013-05-17 11:42:14Z

0

Check the solution in this fiddle:

JSFiddle

$('#checkbox').change(function(){
    var $this = $(this);
    var $table = $("#table");

    if($this.is(":checked"))
        $table.show();
    else
        $table.hide();
});

answered May 17, 2013 at 11:42

Jorge Loureiro

4583 silver badges11 bronze badges

Comments

Anoop · Accepted Answer · 2013-05-17 11:44:50Z

0

Try this JSFIDDLE

Note: You can use change instead of click but but change get fired only after blur in firefox.

$(function(){

    $('#checkbox').click(function (){
           if(this.checked){
               $("#table").show(); 
          }else{
               $("#table").hide();  
         }
     });
});

edited May 17, 2013 at 11:44

answered May 17, 2013 at 11:33

Anoop

23.2k10 gold badges65 silver badges79 bronze badges

Collectives™ on Stack Overflow

HTML checkbox not working

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related