HTML复选框不工作

HTML checkbox not working

本文关键字：工作 复选框 HTML      更新时间：2023-09-26

我想使用复选框显示和隐藏一个表。表的出现和消失没有问题。但是复选框没有被选中。我有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>

试试这个-

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

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

Try

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

演示:小提琴

你可以试试

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

查看此处的解决方案:

JSFiddle 

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

试试这个JSFIDDLE

注意:你可以用change来代替click，但是在firefox中只有在模糊之后才会触发change。

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