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

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 选择器来查找所有字段并绑定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>

Answer 2

将您的 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>

Answer 3

您可以将所有包含field 的输入分组到其id 中，并使用数字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>

Answer 4

作为替代方案，您可以使用数据属性告诉输入要定位哪个复选框。我还放置了一个备用来仅检查是否不为空或备用来查找每个的前一个兄弟。

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