Question

我想使用复选框显示和隐藏表格。该表出现并消失，没有任何问题。但是没有检查复选框。我有Jquery v1.8.2。我有以下代码：

<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>

Answer 1

尝试这种方式 -

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

工作演示--> http://jsfiddle.net/pmNAe/

Answer 2

尝试

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

演示：Fiddle

Answer 3

试试这个JSFIDDLE

注意：您可以使用更改而不是点击，但更改只有在firefox中模糊后才会被触发。

$(function(){

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

Answer 4

您可以尝试

$('#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";       
);

Answer 5

检查这个小提琴中的解决方案：

JSFiddle

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

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

HTML复选框不起作用

5 个答案: