javascript - HTML复选框不起作用

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>

score 5 · Accepted Answer

试试这个方法——

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

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

score 2 · Accepted Answer

尝试

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

演示：小提琴

score 0 · Accepted Answer

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

JSFiddle

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

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

score 0 · Accepted Answer

试试这个JSFIDDLE

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

$(function(){

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

score 0 · Accepted Answer

你可以试试

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

javascript - HTML复选框不起作用

5 回答 5

Related

Reference