如果选中复选框，则将值分配给它旁边的输入字段

Question

如果选中复选框，我需要将值分配给它旁边的文本输入。 例如，如果我检查cb1，则应将value=1 1 分配给txtcb1。我只需要为选中的复选框执行此操作

<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
    <input type="checkbox" name="cb1" value="1">  <input class="red" id="txtcb1" type="text" name="fname">
    Name One | Amount <input type="text" name="Amount1" class="auto-sum"> <br>
    <input type="checkbox" name="cb2" value="2"> <input class="red" id="txtcb2" type="text" name="fname"> Name Two | Amount <input type="text" name="Amount2" class="auto-sum"> <br>
    <input type="checkbox" name="cb3" value="3"> <input class="red" id="txtcb3" type="text" name="fname"> Name Three | Amount <input type="text" name="Amount3" class="auto-sum"><br>
    <input type="checkbox" name="cb4" value="4"> <input class="red" id="txtcb4" type="text" name="fname"> Name Four| Amount <input type="text" name="Amount4" class="auto-sum"> <br>
    <br>
    TOTAL  <label id="amountTotal">0 <label>
     AED <br>
    <input type="submit" value="Submit" onsubmit="return validateForm(this)">
</form>

http://codepen.io/anon/pen/MJWbNR?editors=1111

Answer 1

您可以使用next() 选择复选框旁边的输入，如下所示：

$(this).next('input[type="text"]').val(id);

下面的工作sn-p：

function validateForm(myButton) {

  return true;
}

$(document).ready(function() {

  //iterate through each textboxes and add keyup
  //handler to trigger sum event
  $(".auto-sum").each(function() {
    $(this).attr('disabled', true);
    $(this).keyup(function() {
      calculateSum();
    });
  });

  $('input[type=checkbox]').on('change', function() {
    var id = $(this).val();
    var active = $(this).prop('checked');
    if(active){
      $(this).next('input[type="text"]').val(id);
    }else{
      $(this).next('input[type="text"]').val(0);
    }
    $('.auto-sum[name=Amount' + id + ']').attr('disabled', !active);
    calculateSum();
  });

});


function calculateSum() {

  var sum = 0;
  //iterate through each textboxes and add the values
  $(".auto-sum").each(function() {
    if ($(this).prop('disabled')) return;
    //add only if the value is number
    if (!isNaN(this.value) && this.value.length != 0) {
      sum += parseFloat(this.value);
    }

  });
  //.toFixed() method will roundoff the final sum to 2 decimal places
  $("#amountTotal").html(sum.toFixed(2));
}

.red {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
  <input type="checkbox" name="cb1" value="1">
  <input class="red" id="txtcb1" type="text" name="fname">Name One | Amount
  <input type="text" name="Amount1" class="auto-sum">
  <br>
  <input type="checkbox" name="cb2" value="2">
  <input class="red" id="txtcb2" type="text" name="fname">Name Two | Amount
  <input type="text" name="Amount2" class="auto-sum">
  <br>
  <input type="checkbox" name="cb3" value="3">
  <input class="red" id="txtcb3" type="text" name="fname">Name Three | Amount
  <input type="text" name="Amount3" class="auto-sum">
  <br>
  <input type="checkbox" name="cb4" value="4">
  <input class="red" id="txtcb4" type="text" name="fname">Name Four| Amount
  <input type="text" name="Amount4" class="auto-sum">
  <br>
  <br>TOTAL
  <label id="amountTotal">0
    <label>
      AED
      <br>
      <input type="submit" value="Submit" onsubmit="return validateForm(this)">

</form>

Answer 2

您可以在change 处理程序中使用方法next：

$(this).next('[type="text"]').val($(this).val());

Answer 3

尝试使用next()。

function validateForm(myButton){

	  return true;
	}

	$(document).ready(function () {

	     //iterate through each textboxes and add keyup
	     //handler to trigger sum event
	     $(".auto-sum").each(function () {
	         $(this).attr('disabled', true);
	         $(this).keyup(function () {
	             calculateSum();
	         });
	     });
	  
	  $('input[type=checkbox]').on('change', function() {
	      var id = $(this).val();
	      var active = this.checked ? this.value : 0;
	      var test=$(this).next();
	      $(test).val(active);
	      $('.auto-sum[name=Amount' + id + ']').attr('disabled', !active);
	      calculateSum();
	  });

	 });

	function calculateSum() {

	     var sum = 0;
	     //iterate through each textboxes and add the values
	     $(".auto-sum").each(function () {
	         if ($(this).prop('disabled')) return;
	         //add only if the value is number
	         if (!isNaN(this.value) && this.value.length != 0) {
	             sum += parseFloat(this.value);
	         }

	     });
	     //.toFixed() method will roundoff the final sum to 2 decimal places
	     $("#amountTotal").html(sum.toFixed(2));
	 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
<input type="checkbox" name="cb1" value="1">  <input class="red" id="txtcb1" type="text" name="fname">
Name One | Amount <input type="text" name="Amount1" class="auto-sum"> <br>
<input type="checkbox" name="cb2" value="2"> <input class="red" id="txtcb2" type="text" name="fname"> Name Two | Amount <input type="text" name="Amount2" class="auto-sum"> <br>
<input type="checkbox" name="cb3" value="3"> <input class="red" id="txtcb3" type="text" name="fname"> Name Three | Amount <input type="text" name="Amount3" class="auto-sum"><br>
<input type="checkbox" name="cb4" value="4"> <input class="red" id="txtcb4" type="text" name="fname"> Name Four| Amount <input type="text" name="Amount4" class="auto-sum"> <br>
 <br>
TOTAL  <label id="amountTotal">0 <label>
 AED <br>
 <input type="submit" value="Submit" onsubmit="return validateForm(this)">
  
  </form>

Answer 4

在更改事件回调的复选框中，设置 id 值如下：

 $('input[type=checkbox]').on('change', function() {
  $(this).next('[type="text"]').val($(this).val());
});

Updated Pen