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

我目前正在处理一些

JQuery

和

Javascript

问题，我遇到了一个小问题，我一辈子都想不出如何解决

我有一个

表单

，它动态地从一个

json

文件加载信息，该文件重新使用一个“wpTemplate”并填充一个选择列表。这种

形式

损害了以下几点：

 <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>

我是新来的

JQuery

，因此任何帮助或替代方法都将不胜感激。

如何：

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

这是一份工作报告

怎么样：

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

这是一个可行的方法，这是另一种方法：

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

这里是另一种方式：

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

---

你能展示一些实际的代码，或者是你遇到问题的地方的评论吗？最好用class:id替换id

wpmetplate

。id在页面上必须是唯一的。我给你做了一个jsfiddle。我将您的ID更改为类，因为它必须是唯一的。我希望这会对你有所帮助。你能展示一些实际的代码，或者是对你遇到问题的地方的评论吗？最好用class:id替换id

wpmetplate

。id在页面上必须是唯一的。我给你做了一个jsfiddle。我将您的ID更改为类，因为它必须是唯一的。我希望这对你有帮助。