jQuery .change 텍스트 입력 후 체크 박스 .change

체크 박스를 선택하면 가격과 수량을 계산하는 코드가 있지만 수량 필드가 기본값으로 변경되면 수량 필드의 변경을 구현하는 데 문제가 있습니다. 1 확인란의 선택을 취소하고 다시 확인하지 않고 확인란을 변경하면됩니다. 의미를 만드는jQuery .change 텍스트 입력 후 체크 박스 .change

<table> 
<tr> 
    <td width="10%">&nbsp;</td> 
    <td width="20%">Item</td> 
    <td width="10%">Price</td> 
    <td width="10%">Quantity</td> 
    <td width="10%">Total</td> 
</tr> 
<tr> 
    <td > 
     <input type="checkbox" name="Extras" value="id" /> 
    </td> 
    <td>Test Item 1</td> 
    <td class="price">12.50</td> 
    <td><input name="qty" class="quantity" value="1"></td> 
    <td class="total"></td> 
</tr> 
    <tr> 
    <td > 
     <input type="checkbox" name="Extras" value="id" /> 
    </td> 
    <td>Test item 2</td> 
    <td class="price">20</td> 
    <td><input name="qty" class="quantity" value="1"></td> 
    <td class="total"></td> 
</tr> 

</table>

jQuery를

$(document).ready(function() { 
$('input:checkbox').change(function() { 
    var $this = $(this), 
     parentRow = $this.closest('tr'), 
     totalCell = parentRow.find('.total'); 

    if ($this.prop('checked') === true) { 
     var price = parseFloat(parentRow.find('.price').html()); 
     var quantity = parseFloat(parentRow.find('.quantity').val(
      // assuming I'd need a $('input:text').change(function() { 
      // etc at this point but all i've tried doesn't work 
      )); 
     totalCell.text(price * quantity) 
    } 
    else totalCell.text('') 
}); 

});

희망

출처

2012-11-19 Wade H

문제를 자세히 설명해주십시오. – rahul

확인란을 선택 취소하고 다시 선택하지 않고 수량이 변경되면 자동으로 총계를 업데이트 할 수 있기를 바랍니다. 다음은 그 예입니다 : http://jsfiddle.net/vNg9v/8/ Thx! –

@ankur 죄송합니다 ... 게시하기 전에 명확히해야합니다. 대답 했음 :) –

그럼 당신이 당신의 수량 텍스트 상자에 연결된 이벤트가 없습니다.

체크 아웃이 jsFiddle 또는 아래 코드 :

$('.quantity').change(function() { 
    var $this = $(this), 
     parentRow = $this.closest('tr'), 
     totalCell = parentRow.find('.total'); 
     checkBox = parentRow.find('input:checkbox'); 
    if (checkBox.prop('checked') === true) { 
     var price = parseFloat(parentRow.find('.price').html()); 
     var quantity = parseFloat($this.val()); 
     totalCell.text(price * quantity) 
    } 
    else totalCell.text('') 
});

출처

2012-11-19 05:25:37

완벽! 감사! Simple ... 확실히 체크 박스 요소 안에 추가해야한다고 생각했습니다. –

변경이

$(document).ready(function() { 
    $('input').change(function() { 
     var $this = $(this), 
      parentRow = $this.closest('tr'), 
      totalCell = parentRow.find('.total'); 

     if ($this.prop('checked') === true || parentRow.find('input:checkbox').prop('checked') == true) { 
      var price = parseFloat(parentRow.find('.price').html()); 
      var quantity = parseFloat(parentRow.find('.quantity').val()); 
      totalCell.text(price * quantity) 
     } 
     else totalCell.text('') 
    }); 


});

DEMO

출처

2012-11-19 05:30:56 rahul

감사! 이것은 훌륭하게 작동했습니다. –

내가 해결 한 작은 문제가 있었다처럼 JQuery와. 그것을 통해 당신이 필요로하는 것을 알려주십시오.

$(document).ready(function() { 
$('input:checkbox').change(function() { 
    var crntSelection = $(this), 
     parentRow = crntSelection.closest('tr'), 
     totalCell = parentRow.find('.total'); 

    if ($(this).is(':checked')) { 
     alert('checje'); 
     var price = parseFloat(parentRow.find('.price').html()); 
     var quantity = parseFloat(parentRow.find('.quantity').val(
      // assuming I'd need a $('input:text').change(function() { 
      // etc at this point but all i've tried doesn't work 
      )); 
     alert(price); 
     alert(quantity); 
     totalCell.html(price * quantity) 
    } 
    else totalCell.text('') 
}); 

});

출처

2012-11-19 05:31:49 ankur

jQuery .change 텍스트 입력 후 체크 박스 .change

답변

관련 문제