Question

即将尝试的内容：

页面加载隐藏所有元素
更改复选框切换显示/隐藏元素

的CSS：

.hide{
     display: none;
}

标记：

<form id="checkThis">
    <input type="checkbox" data-target="hide1" class="ck">check1</input>
    <input type="checkbox" data-target="hide2"class="ck">check2</input>
</form>

<div id="theHidden">
  <div id="hide1" class='hide'>Im Hidden On Page Load</div>
  <div id="hide2" class='hide'>Im Hidden On Page Load Too</div>
</div>

编辑问题的小提琴：http://jsfiddle.net/1tx18jcy/

Answer 1

<input type="checkbox" data-target='transom3' .../>    
<input type="checkbox" data-target='lsl3' .../>    
<input type="checkbox" data-target='door3' .../>
// ...

$(".partCheck").change(function(){
   $('#' + this.dataset.target).toggle(this.checked);
});

Answer 2

我相信这就是你要找的......

http://jsfiddle.net/MYhTu/

$(".partCheck").click(function(){
  if ($(this).prop("checked")) {
        $("#"+$(this).val()).show();
  } else {
      $("#"+$(this).val()).hide();
  }
});

在jsfiddle中，你会注意到我将值更新为等于与之关联的部分的id（我猜是猜，但你可以放入自己的）

Answer 3

用这一行替换Javascript：

$(".partCheck").attr("onclick", "if($(this).prop('checked') $('#'+$(this).val()).show(); else $('#'+$(this).val()).hide();");

并将复选框的值设置为等于开发ID。

使用复选框切换显示/隐藏

3 个答案: