Question

我目前正在处理一些<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css" rel="stylesheet" /> <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" /> <div class="dropdown"> <a data-toggle="dropdown" href="#"> <button type="button" class="btn btn-default">Dropdown <span class="caret"></span> </button> </a> <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> <li> <form role="form"> <div class="form-group"> <label for="exampleInputEmail1">Email</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <div class="form-group"> <label for="exampleInputFile">File input</label> <input type="file" id="exampleInputFile"> <p class="help-block">Example block-level help text here.</p> </div> <div class="checkbox"> <label> <input type="checkbox">Check me </label> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </li> </ul> </div>和JQuery，我遇到了一个小问题，在我的生活中我无法弄清楚如何解决。

我有Javascript动态加载来自form文件的信息，该文件重新使用“wpTemplate”并填充选择列表。这个json会影响以下内容;

form

实质上，可能有多个<div class="wp" id="wpTemplate" > <input type="checkbox" id="wpCheck" name="" class="wp" value=""> <label id="wpLabel" class="wpLabel"></label> <div class="uc" id="uc"> <select class="ucSelect" id="ucSelect" name="case" multiple> <option id="option" class="option"></option> </select> </div> </div>“wpTemplate”。我的目的是以某种方式选择一个或多个“wpCheck”div和“uc”checkbox来显示，具体取决于所选的特定div。

我尝试将checkbox添加到“uc”style="display: none;"以及带有show / hide功能的简单class语句但无效。

if-else

我是$('.wp').each(function() { if($(this).is(":checked")) { $('.uc').show(); } else { $('.uc').hide(); } });的新手，所以任何帮助或替代方式都会非常感激。

Answer 1

怎么样：

$('.wpCheck').on('change', function () {
  var $uc = $(this).closest('.wpTemplate').find('.uc')
  if ($(this).prop('checked')) {
    $uc.show()
  } else {
    $uc.hide()
  }
})

这是一个有效的fiddle

Answer 2

这是另一种方式：

$( document ).ready(function() {
    $('input.wp').change(function() {

        var $this = $(this);
        if ($this.is(":checked"))
        {
            $this.siblings('div.uc').show();
        }
        else
        {
            $this.siblings('div.uc').hide();
        }
        });
    });

fiddle

根据动态生成的复选框多次显示相同的div

2 个答案: