如何在字段更新时选中复选框
如何在字段更新时选中复选框
提问于 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);
}); 回答 4
Stack Overflow用户
回答已采纳
发布于 2019-07-29 18:49:06
将您的iinput字段和复选框包装在div中，然后将选中复选框的逻辑添加到这些包装器中。
$('.checked-input').find('input[type=text]').on('change', function(){
$(this).closest('.checked-input').find('input[type=checkbox]').prop('checked', true);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="checked-input">
<input type="text" value="" id="field-1" name="field-1">
<input value="1" name="checkbox-1" id="checkbox-1" type="checkbox"/>
</div>
<div class="checked-input">
<input type="text" value="" id="field-2" name="field-2">
<input value="1" name="checkbox-2" id="checkbox-2" type="checkbox"/>
</div>
Stack Overflow用户
发布于 2019-07-29 18:55:42
我建议您使用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>
Stack Overflow用户
发布于 2019-07-29 18:49:21
您可以对id中包含field的所有输入进行分组，并使用数字id选中相应的复选框：
$('input[id*=field]').on('change', function() {
$('#checkbox-' + $(this).prop("id").split('-')[1]).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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57252096
复制相关文章
相似问题
腾讯云开发者
