javascript - 如何在字段更新时选中复选框

Question

我正在制作一个包含 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);
});                                                 

Answer 1

我建议您使用starts-with选择器来查找所有字段并绑定(bind)输入处理程序。然后，当您能够处理它时，您必须找到适当的复选框并选中它:

$('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>