如何将复选框值添加到 textarea 字段

Question

我有 textarea 字段和 3 组复选框。 用户可以单独选择任何复选框，复选框值将添加到 textarea 字段。 但是如何包含“全选”功能来选择组中的所有复选框？ 我创建了“全选”功能，但选择后的值不会添加到 textarea 字段。

 // Add checkbox value to text field $checks = $("ul li :checkbox"); $checks.on("change", function() { var string = $checks.filter(":checked").map(function(i,v){ return this.value; }).get().join(","); $("#results").val( "checked:" + string); }); // Select all checkboxes in the group jQuery(function($){ $('#allg1').click(function () { $('.group1 li input').not(this).prop('checked', this.checked);}); $('#allg2').click(function () { $('.group2 li input').not(this).prop('checked', this.checked);}); $('#allg3').click(function () { $('.group3 li input').not(this).prop('checked', this.checked);}); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <textarea id="results" rows="2" cols="60"> </textarea> <ul class="group1"> <input type="checkbox" id="allg1" name="allg1"><label for="allg1">Select all from group G1</label> <li><input type="checkbox" value="G101"></li> <li><input type="checkbox" value="G102"></li> <li><input type="checkbox" value="G103"></li> </ul> <ul class="group2"> <input type="checkbox" id="allg2" name="allg2"><label for="allg2">Select all from group G2</label> <li><input type="checkbox" value="G201"></li> <li><input type="checkbox" value="G202"></li> <li><input type="checkbox" value="G203"></li> </ul> <ul class="group3"> <input type="checkbox" id="allg3" name="allg3"><label for="allg3">Select all from group G3</label> <li><input type="checkbox" value="G301"></li> <li><input type="checkbox" value="G302"></li> <li><input type="checkbox" value="G303"></li> </ul>

Answer 1

为此，您可以在切换“全选”时在复选框上手动trigger() change事件。 然后您的普通事件处理程序将运行，更新文本框中的文本。

另请注意，您可以通过对“全选”框使用公共class属性来干燥 JS 控制它们。

 jQuery($ => { // Add checkbox value to text field let $checks = $("ul li :checkbox").on("change", function() { let string = $checks.filter(":checked").map((i, el) => el.value).get().join(","); $("#results").val(string && "checked:" + string); }); // Select all checkboxes in the group $('.all').click(e => { $(e.target).closest('.group').find('li input').not(e.target).prop('checked', e.target.checked).trigger('change'); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <textarea id="results" rows="2" cols="60"> </textarea> <ul class="group"> <label><input type="checkbox" class="all" name="allg1">Select all from group G1</label> <li><input type="checkbox" value="G101"></li> <li><input type="checkbox" value="G102"></li> <li><input type="checkbox" value="G103"></li> </ul> <ul class="group"> <label><input type="checkbox" class="all" name="allg2">Select all from group G2</label> <li><input type="checkbox" value="G201"></li> <li><input type="checkbox" value="G202"></li> <li><input type="checkbox" value="G203"></li> </ul> <ul class="group"> <label><input type="checkbox" class="all" name="allg3">Select all from group G3</label> <li><input type="checkbox" value="G301"></li> <li><input type="checkbox" value="G302"></li> <li><input type="checkbox" value="G303"></li> </ul>