如何在字段更新时选中复选框
如何在字段更新时选中复选框
提问于 2019-07-29 18:40:05
我正在制作一个带有10个复选框的10个字段的表单。在更新字段时，我希望选中相关复选框。我可以通过编写10个不同的ON change函数来让它工作，但我正在寻找一种聪明的方法来实现它，而不是为各自的字段编写10个不同的ON change函数。
<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);
}); Stack Overflow用户
发布于 2019-07-29 19:07:57
作为另一种选择，您可以使用data poperty告诉输入哪个复选框为目标。我还设置了一个alternate来仅检查是否不为空，或者放一个alternate来查找每个的前一个同级。
$('input[type=text]').on('change', function(event) {
let checkpair = $(this).data('targetpair');
$(checkpair).prop('checked', true);
// alternate only if not empty:
//$(checkpair).prop('checked', $(this).val().trim().length);
});
/* alternate that finds the immediate checkbox sibling
$('input[type=text]').on('change', function(event) {
$(this).prevAll('input[type=checkbox]').first().prop('checked', true);
});
*/<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/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" data-targetpair="#checkbox-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" data-targetpair="#checkbox-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" data-targetpair="#checkbox-3" name="field-3">
<label class="form-label">Field 3</label>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57252096
复制相关文章
相似问题
腾讯云开发者
