javascript - 如何在字段更新时选中复选框
问题描述
我正在制作一个包含 10 个字段和 10 个复选框的表单。在更新字段时,我希望选中相关复选框。我可以通过编写 10 个不同的 ON 更改函数来使其工作,但我正在寻找一种智能方法来实现它,而不是为各个字段编写 10 个不同的 ON 更改函数。
<input value="1" name="checkbox-1" id="checkbox-1" type="checkbox"/>
<label for="checkbox-1"></label>
<input type="text" value="" id="field-1" name="field-1">
<label class="form-label">Field 1</label>
<input value="1" name="checkbox-2" id="checkbox-2" type="checkbox"/>
<label for="checkbox-2"></label>
<input type="text" value="" id="field-2" name="field-2">
<label class="form-label">Field 2</label>
<input value="1" name="checkbox-3" id="checkbox-3" type="checkbox"/>
<label for="checkbox-3"></label>
<input type="text" value="" id="field-3" name="field-3">
<label class="form-label">Field 3</label>
$('#field-1').bind('change', () => {
$('#checkbox-1').prop('checked', true);
});
$('#field-2').bind('change', () => {
$('#checkbox-2').prop('checked', true);
});
$('#field-3').bind('change', () => {
$('#checkbox-3').prop('checked', true);
});
解决方案
我建议您使用starts-with选择器来查找所有字段并绑定input
处理程序。然后当你能够处理它时,你必须找到合适的checkbox
并检查它:
$('input[name^="field-"]').on('input', function(){
let fieldId = $(this).attr('name').slice(-1);
$('#checkbox-'+fieldId).prop('checked', true);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input value="1" name="checkbox-1" id="checkbox-1" type="checkbox"/>
<label for="checkbox-1"></label>
<input type="text" value="" id="field-1" name="field-1">
<label class="form-label">Field 1</label>
<input value="1" name="checkbox-2" id="checkbox-2" type="checkbox"/>
<label for="checkbox-2"></label>
<input type="text" value="" id="field-2" name="field-2">
<label class="form-label">Field 2</label>
<input value="1" name="checkbox-3" id="checkbox-3" type="checkbox"/>
<label for="checkbox-3"></label>
<input type="text" value="" id="field-3" name="field-3">
<label class="form-label">Field 3</label>
推荐阅读
- oracle - 如何正确将 dmp 文件从 11g 导入到 18c oracle?ORA-600、IMP58、IMP28
- c# - dotnet core docker 容器不能在 kubernetes 上运行
- c++11 - 无法理解(并修复)为什么存在此警告“重载 xxx 的调用不明确”
- python - 读取 CSV 并输出 json。需要设置数据类型
- google-cloud-functions - 从具有速率限制/最大配额的浏览器调用 GCF
- javascript - 我怎样才能让它在用户的游戏中说 Nothing 而不是 null ?
- r - 在分类树之后尝试进行交叉验证时出错
- php - PHPMyAdmin (WAMP)
- javascript - 刷新页面js html时随机化图像
- maven - 将元数据添加到工件