jquery - 页面加载后选中复选框

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();
   }
});

在复选框上单击

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

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

      });

    });