为选中的每个复选框添加和删除隐藏输入

Question

如何在选中复选框列表中的复选框时创建隐藏的输入元素，并在取消选中复选框时将其删除。见附件示例。

<div class="form-group">
<label class="h4" for="location">
    Industry
</label>

<div class="scrollable">
    <div class="checkbox margin-top-0">
        <label>
            <input type="checkbox" value="126">
            Arts, Music
        </label>
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox" value="127">
            Banking, Finance
        </label>
    </div>
</div>

<div>
<h5 class="margin-bottom-5">Selected</h5>
<ul>
    <li data-id="127">
        Banking, Finance
        <a >
            <i class="icon-after" aria-hidden="true" data-icon="x"></i>
        </a>
        <input type="hidden" value="127" name="industry" data-id="127">
    </li>
    <li data-id="126">
        Arts, Music
        <a >
            <i class="icon-after" aria-hidden="true" data-icon="x"></i>
        </a>
        <input type="hidden" value="126" name="industry" data-id="126">
    </li>
</ul>
</div>

Answer 1

 $('#checkbox1').change(function() {
    if($(this).is(":checked")) {
       $(this).after('<input type="hidden" >');
    }else{
    $(this).next('input["type=hidden"]').remove();              
    }   
  }             
});

在您的情况下，您需要在您创建的 ul 上调用或删除函数。