javascript - 如何将复选框值添加到 textarea 字段
问题描述
我有 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>
解决方案
为此,您可以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>
推荐阅读
- javascript - JavaScript 动态检查 typeof
- python - 验证使用 iloc[0] 时只有一行
- reactjs - 映射时如何在本机反应中仅渲染一次同名字段
- android - 如何增加底部导航栏Android Studio中存在的购物车图标上的文本
- android - 任务 ':app:compileDevDebugJavaWithJavac' 的执行失败。飘飘然
- python - 可以以联合方式训练 gensim word2vec 模型吗?
- android - 在 Android Studio 中,如何为每种产品风格添加不同的 Manifest 文件?
- c# - C# .NET Core 3.1 OData:从 https 到 http 的意外更改 URI
- centrifuge - 连接到专用通道 сentrifuge 时如何更正错误?
- c - 插入链表出错