チェックボックスをオンにするとチェックボックスをオンにして隣のフィールドを入力します

Question

チェックボックスをオンにすると値を割り当て、隣にあるテキスト入力にチェックボックスを付ける必要があります。 たとえば、cb1をチェックすると、value=1 1をtxtcb1に割り当てる必要があります。私は以下のようにid値を設定し、変更イベントのコールバックであなたのチェックボックスには、この唯一の確認]チェックボックスのみ

<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

を実行する必要があります。

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

Updated Pen

Answer 3

あなたは使用できる方法nextchangeハンドラー：

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