Question

我的页面中有一个复选框

如果选中该复选框，则我想显示div。如果未选中，则另一个div。

<input type="checkbox" id="CBforGrid" />Add CheckBoxes<br />

Answer 1

你没有显示你的div的标记，但是假设它们都是隐藏的，你可以在页面加载时做一次这样的事情（正如你的问题标题暗示的那样）：

$(document).ready(function() {
   if ($("#CBforGrid").is(":checked"))
      $("#adiv").show();
   else
      $("#anotherdiv").show();
});

或者，如果您的意思是每次用户更改复选框时都这样做，那么可能是这样的：

$(document).ready(function() {
    var $aDiv = $("#adiv").hide(),
        $anotherDiv = $("#anotherDiv");

    $("#CBforGrid").click(function() {
       $aDiv[this.checked ? "show" : "hide"]();
       $anotherDiv[this.checked ? "hide" : "show"]();
    });
});

演示：http://jsfiddle.net/Vk6R8/

Answer 2

页面加载

$(function(){
   if($('#CBforGrid').is(':checked')) {
        $('div').show();
   }
});

在CheckBox上单击

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

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

      });

    });

页面加载后检查复选框

2 个答案: