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

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

下面的工作片段:

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>