查看: 5896|回复: 4

怎么选择mini-checkbox让一部分隐藏 [复制链接]

609013830

新手上路

Rank: 1

电梯直达

楼主

发表于 2018-11-21 11:37:00 |只看该作者 |倒序浏览

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<style>
.div{
   width:200px;
   height:200px;
   border:2px solid red;}
</style>
<script>
  $(function(){
   $("input").bind("click",function(){
      if(this.checked){
            $("#"+$(this).attr("traget")).hide();
      }else{
            $("#"+$(this).attr("traget")).show();
            }

      })
   });
</script>
<body>
<input type="checkbox" id="id1" traget="div1">
<label for="id1">div1</label>
<input type="checkbox" id="id2" traget="div2">
<label for="id2">div2</label>
<input type="checkbox" id="id3" traget="div3">
<label for="id3">div3</label>

<div class="div" id="div1">div1</div>
<div class="div" id="div2">div2</div>
<div class="div" id="div3">div3</div>
</body>
</html>

就像上面这个样子，勾上以后一部分被隐藏掉

收藏0

dforce

超级版主

Rank: 8 Rank: 8

沙发

发表于 2018-11-21 14:01:04 |只看该作者

这使用和你这差不多的
<div class="mini-checkbox" onvaluechanged="onValueChanged"  data-options={target:'div1'}  value="true" text="div1"></div>

function onValueChanged(e) {
      var value = e.value;
      if (value=="true") {
         $("#" + e.sender.target).show();
      } else {
         $("#" + e.sender.target).hide();
      }
}

609013830

新手上路

Rank: 1

板凳

发表于 2018-11-21 15:06:10 |只看该作者

dforce 发表于 2018-11-21 14:01
这使用和你这差不多的

用你的方法在data-options={target:'div1'}报了与元素类型 "input" 相关联的属性 "data-options" 应有左引号。的错，我自己找了种方法
               <tr>
               <input  name="searchInhos" class="mini-checkbox" text="筛选住院信息" value="Y" trueValue="Y" falseValue="N" /></td>
                  <td width="190" style="text-align: center;">
                     <a id="searchBtnMst"  class="mini-button search">查询</a>
                  </td>
            </tr>
            <tr id="more">
                  ...
            </tr>

mini.getByName("searchInhos").on("checkedchanged",function (e) {
      if(e.checked!=true) {

         $("#more").css("display","none");
      }else {

         $("#more").css("display","block");
      }
});

但是隐藏完再打开的时候原来的样式就没有了，他有没有什么方法解决