jquery - 显示具有不同标题的同一 div 的多个实例

Question

我想根据上一步中选中的复选框数量多次显示特定的 div。类似于 this form 中的步骤 3.2 .这样做的最佳方法是什么？

我希望根据选中的复选框数多次显示的 Div，其中 h3 (#tile_name) 是复选框的值:

<div class="plan_select" id="border">
  <h3 id="tile_name">Tiles - Selected</h3>
  <div class='styled-select'>
    <select name='bankskivans'>
      <option value='Halvrund'>Halvrund</option>
      <option value='Helrund'>Helrund</option>
      <option value='Karnis helrund'>Karnis helrund</option>
      <option value='Nosformad'>Nosformad</option>
      <option value='Rak fasad'>Rak fasad</option>
      <option value='Rak rundad'>Rak rundad</option>
      <option value='Vattenfall'>Vattenfall</option>
    </select>
  </div>
</div>

JS fiddle https://jsfiddle.net/L7swuv8g/

JQuery 代码:

$(document).ready(function() {
  var $measures = $('input.checkbox_plan');
  var $showmeasures = $('input[name="measures_show"]');
  var $border = $('div#border');

  $measures.hide();
  $border.hide();
  $showmeasures.on('click', function() {
    if ($(this).is(':checked')) {
      $measures.show();
      $border.show();
    } else {
      $measures.hide();
      $border.hide();
    }
  });
});

Answer 1

不确定您到底想要什么，但也许这对您有用？

我做到了，所以它会为每个选中的复选框创建模板内容的实例。 (或者没有，如果没有被选择的话。)

https://jsfiddle.net/d6k40wd0/2/

HTML:

<div id='template' style='display:none'>
  <div class='plan_select' id='border'>
    <h3 id='tile_name'>#title#</h3>
    <div class='styled-select'>
      <select name='bankskivans'>
        <option value='Halvrund'>Halvrund</option>
        <option value='Helrund'>Helrund</option>
        <option value='Karnis helrund'>Karnis helrund</option>
        <option value='Nosformad'>Nosformad</option>
        <option value='Rak fasad'>Rak fasad</option>
        <option value='Rak rundad'>Rak rundad</option>
        <option value='Vattenfall'>Vattenfall</option>
      </select>
    </div>
  </div>
</div>

<label for="a"><input type="checkbox" id="a" value="alpha" class="templateChoice" />Choose a.</label>
<label for="b"><input type="checkbox" id="b" value="bravo" class="templateChoice" />Choose b.</label>
<label for="c"><input type="checkbox" id="c" value="charlie" class="templateChoice" />Choose c.</label>
<label for="d"><input type="checkbox" id="d" value="delta" class="templateChoice" />Choose d.</label>
<br />
<button type="button" onclick="showResult();">Show result</button>
<hr />
<div id="result"></div>

JavaScript:

function showResult() {
  var template = $("#template").html();
  $("#result").html("");
  $.each($(".templateChoice"), function(index, checkbox) {
    if (checkbox.checked) {
        var templateCopy = template.replace("#title#", "You selected " + checkbox.value);
        $("#result").html($("#result").html() + templateCopy);
    }
  });
}