Question

我有一个复选框，选中后会显示一个div。正如所料，当取消选中时，div将被隐藏。

我已经得到了以下代码，但我需要一种方法来检查复选框本身是否从检查切换到取消选中！

$(function(){
    if($('#guess_the_score').is(':checked')){
        $("#guess_score_show").toggle();
    }
});

该复选框的ID为guess_the_score 要显示的div的ID为guess_score_show

任何帮助将不胜感激：）

Answer 1

您应该使用change()事件，change事件会在其值发生变化时发送给该元素。

使用

$(function() {
    $('#guess_the_score').change(function() {
        $("#guess_score_show").toggle(this.checked);
    }).change(); //Trigger on page load
});

Answer 2

使用.change的{{1}}事件和显示隐藏div ，如下所示：

checkbox

OR

$(function(){
  $('#guess_the_score').change(function(){
     if($(this).is(':checked')){
        $("#guess_score_show").show();
     }
     else{ 
        $("#guess_score_show").hide(); 
     }
  }).change();  //trigger on page load
});

Working DEMO

Answer 3

$(function() {
  $('#guess_the_score').on('change', function() {
    $("#guess_score_show").toggle(this.checked);
  });
});

#guess_score_show {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

Toggle Score
<input id="guess_the_score" type="checkbox" />
<br>
<div id="guess_score_show">Score: 10</div>

Answer 4

试

$('#guess_the_score').click(function () {

    if ($(this).is(':checked')) {
        $("#guess_score_show").show();
    } else {
        $("#guess_score_show").hide();
    }

});

Answer 5

试试这个

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

Answer 6

使用jquery＆＃34;更改＆＃34;事件你也可以使用

$('#guess_the_score').change(function(){

    if($(this).is(':checked'))
    {
                $("#guess_score_show").show();
    }else
        {
                    $("#guess_score_show").hide();
        }
});

或你也可以使用＆＃34; On＆＃34;事件

 $('#guess_the_score').on('change',function(){

        if($(this).is(':checked'))
        {
                    $("#guess_score_show").show();
        }else
            {
                        $("#guess_score_show").hide();
            }
    });

Answer 7

jQuery.toggle()接受一个布尔值，指示是否显示或隐藏元素。所以你可以这样做：

$('#guess_the_score').change(function(){
   $('#theDiv').toggle($('#guess_the_score').is(':checked'));
});

JSFiddle here

Answer 8

试试这个

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Text Test</title>
  <style>

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

</head>
<body>

    <input type="checkbox" id="guess_the_score"/><span>Hide/show score</span>
    <div id="guess_score_show">Score is 500</div>
    

<script>
    $(document).ready(function () {
        $(function () {
            $('#guess_the_score').change(function () {
                $("#guess_score_show").toggle(this.checked);
            }).change();
        });
        
    });
</script>
</body>
</html>

复选框状态需要显示或隐藏div

8 个答案: