CODEWITHSUNDEEP
javascriptjquerycheckboxinput
Ikt
Ikt

Reputation: 117

How to make checkbox checked on field update

I am making a form with 10 fields with 10 checkboxes. On updating the field i want relevant checkbox to be checked. I can make it work by writing 10 different ON change function but i am looking for a smart way to achieve it instead of writing 10 different ON change functions for respective fields.

<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);
});

Upvotes: 0

Views: 348

Answers (4)

Mark Schultheiss
Mark Schultheiss

Reputation: 34168

As an alternative you could tell the input which checkbox to target using a data poperty. I also put an alternate to only check if not empty OR an alternate to find the prior sibling of each.

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

Upvotes: 0

dganenco
dganenco

Reputation: 1616

I would advise you to use starts-with selector to find all your fields and bind input handlers. Then when you are able to handle it, you have to find appropriate checkbox and check it:

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

Upvotes: 1

shrys
shrys

Reputation: 5940

You could group all input which contain field in their id and use the number id to check corresponding checkbox:

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

Upvotes: 0

Lapskaus
Lapskaus

Reputation: 1721

Wrap your iinput field and checkbox in a div and then add the logic of checking your checkbox to those wrappers.

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

Upvotes: 0

Related Questions