如果选中复选框，则分配值以输入其旁边的字段

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>

Answer 2

在上改变事件的回调您的复选框为此，设置如下面的id值：

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

Updated Pen

Answer 3

你change内部可以使用方法next处理程序：

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

Answer 4

尝试使用next()。

function validateForm(myButton){ 
 

 
\t return true; 
 
\t } 
 

 
\t $(document).ready(function() { 
 

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

 
\t }); 
 

 
\t function calculateSum() { 
 

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

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

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