问题:
我试图将复选框值与同一表格行中的输入值进行比较。我在关键字上比较它们。当用户填写文本框中的值时,它会将该值与复选框的值进行比较。如果值相等,我希望复选框进入选中状态。
有趣的是,我的代码执行了此操作,但仅限于复选框/输入的第一个实例。请注意,我使用的是icheck插件,因此我使用了一些自定义事件。我们赞赏任何正确方向的帮助。
请参阅下面的代码段。
$(function() {
var payFull = $('input[type="checkbox"].payfull');
var payNow = $('input[type="text"].paynow');
var payAmt = $('#amounttopay');
// Recalc Function
function reCalc() {
var sum = 0;
payNow.each(function() {
sum += Number($(this).val());
});
if (!isNaN(sum) && sum.length !== 0) {
payAmt.html('$' + sum.toFixed(2));
} else {
payAmt.html('$0.00');
}
}
// When Pay in Full Checkbox is Checked fill in Pay This Time Field with Invoice Amount Due Value
payFull.on('ifChecked', function(event) {
var val = $(this).val().replace('$', '');
var price = $(this).closest('tr').find('input[type="text"]').val(val);
price;
reCalc;
});
// If Pay in Full Unchecked then remove value from respective Pay This Time Input
//if (event.target.checked === true) { // Only bind the ifUnchecked event if the checkbox is checked
payFull.on('ifUnchecked', function(event) {
var removePrice = $(this).closest('tr').find(payNow).val('');
$(removePrice);
$(reCalc);
});
//}
// If Pay This Time changes recalculate total
var payFullVal = payFull.val().replace('$', '');
payNow.keyup(function(event) {
// If Checkbox and Input values DO NOT match
if (payFullVal !== $(this).val()) {
$(this).closest('tr').find(payFull).iCheck('uncheck');
}
// If Checkbox and Input values DO match
else if (payFullVal == $(this).val()) {
$(this).closest('tr').find(payFull).iCheck('check');
} else {}
$(reCalc);
});
});

/* iCheck plugin Square skin, blue
----------------------------------- */
.icheckbox_square-blue,
.iradio_square-blue {
display: inline-block;
*display: inline;
vertical-align: middle;
margin: 0;
padding: 0;
width: 22px;
height: 22px;
background: url(https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.1/skins/square/blue.png) no-repeat;
border: none;
cursor: pointer;
}
.icheckbox_square-blue {
background-position: 0 0;
}
.icheckbox_square-blue.hover {
background-position: -24px 0;
}
.icheckbox_square-blue.checked {
background-position: -48px 0;
}
.icheckbox_square-blue.disabled {
background-position: -72px 0;
cursor: default;
}
.icheckbox_square-blue.checked.disabled {
background-position: -96px 0;
}
.iradio_square-blue {
background-position: -120px 0;
}
.iradio_square-blue.hover {
background-position: -144px 0;
}
.iradio_square-blue.checked {
background-position: -168px 0;
}
.iradio_square-blue.disabled {
background-position: -192px 0;
cursor: default;
}
.iradio_square-blue.checked.disabled {
background-position: -216px 0;
}
/* Retina support */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
.icheckbox_square-blue,
.iradio_square-blue {
background-image: url(blue@2x.png);
-webkit-background-size: 240px 24px;
background-size: 240px 24px;
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.1/icheck.min.js"></script>
<script>
$(function() {
$('#datatable input[type=checkbox]').iCheck({
checkboxClass: 'icheckbox_square-blue',
increaseArea: '10%' // optional
});
});
</script>
<table class="table table-bordered" id="datatable">
<thead>
<tr>
<th class="text-center view">View</th>
<th class="text-center">Invoice Date</th>
<th class="text-center">Invoice #</th>
<th class="text-center">PO #</th>
<th class="text-center">Invoice Amount</th>
<th class="text-center">Amount Due</th>
<th class="text-center">Pay In Full</th>
<th class="text-center">Pay This Time</th>
</tr>
</thead>
<tfoot>
<tr class="foot">
<th class="text-left">
<h5 class="semibold text-uppercase nm ml5">Pay This Time</h5>
</th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th class="text-right">
<h3 class="semibold nm mr5" id="amounttopay">$0.00</h3>
</th>
</tr>
</tfoot>
<tbody>
<tr>
<td class="text-center">
<label>
<input class="view-detail" data-contextual="selected" data-target="tr" data-toggle="selectrow" name="SPI_Inv_Select" type="checkbox" value="SPI_Inv_Num">
</label>
</td>
<td class="text-center">SPI_Inv_Date</td>
<td class="text-center"><a class="uline" href='#'>SPI_Inv_Num</a>
</td>
<td class="text-center">SPI_Inv_PONum</td>
<td class="text-right">SPI_Inv_Amt</td>
<td class="text-right">SPI_Inv_DueAmt</td>
<td class="text-center payinfull">
<input class="payfull" name="SPI_InvPay_Select" type="checkbox" value="$109.92">
</td>
<td class="text-center paythistime">
<div class="input-group"> <span class="input-group-addon">$</span>
<input class="form-control paynow" data-parsley-error-message="Invalid Character" data-parsley-errors-container=".one" data-parsley-pattern="^\d+(,\d{1,2})?$" type="text">
</div>
<span class="one"></span>
</td>
</tr>
<tr>
<td class="text-center view">
<label>
<input class="view-detail" data-contextual="selected" data-target="tr" data-toggle="selectrow" name="SPI_Inv_Select" type="checkbox" value="SPI_Inv_Num">
</label>
</td>
<td class="text-center">SPI_Inv_Date</td>
<td class="text-center"> <a class="uline" href='#'>SPI_Inv_Num</a>
</td>
<td class="text-center">SPI_Inv_PONum</td>
<td class="text-right">SPI_Inv_Amt</td>
<td class="text-right">SPI_Inv_DueAmt</td>
<td class="text-center payinfull">
<input class="payfull" name="SPI_InvPay_Select" type="checkbox" value="$6.65">
</td>
<td class="text-center paythistime">
<div class="input-group"> <span class="input-group-addon">$</span>
<input class="form-control paynow" data-parsley-error-message="Invalid Character" data-parsley-errors-container=".two" data-parsley-pattern="^\d+(,\d{1,2})?$" type="text">
</div>
<span class="two"></span>
</td>
</tr>
</tbody>
</table>
&#13;
答案 0 :(得分:1)
这可能对您有所帮助
var payFull = $('input[type="checkbox"].payfull');
var payNow = $('input[type="text"].paynow');
var payAmt = $('#amounttopay');
payFull.on('ifChecked', function(event) {
$(this).parents('tr').find('.paynow').val($(this).val());
Calc();
});
payFull.on('ifUnchecked', function(event) {
if ($(this).parents('tr').find('.paynow').val() == $(this).val()) {
$(this).parents('tr').find('.paynow').val('')
Calc();
}
});
$('.paynow').keyup(function() {
var $ThisCheck = $(this).parents('tr').find('.payfull')
if ($(this).val() == $ThisCheck.val()) {
$ThisCheck.iCheck('check');
} else {
$ThisCheck.iCheck('uncheck');
}
Calc();
})
function Calc() {
var Sum = 0;
$('.paynow').each(function(index, Obj) {
var value = parseFloat($(this).val());
if (!isNaN(value)) Sum += value
})
$('#amounttopay').text(Sum.toFixed(2));
}
&#13;
/* iCheck plugin Square skin, blue
----------------------------------- */
.icheckbox_square-blue,
.iradio_square-blue {
display: inline-block;
*display: inline;
vertical-align: middle;
margin: 0;
padding: 0;
width: 22px;
height: 22px;
background: url(https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.1/skins/square/blue.png) no-repeat;
border: none;
cursor: pointer;
}
.icheckbox_square-blue {
background-position: 0 0;
}
.icheckbox_square-blue.hover {
background-position: -24px 0;
}
.icheckbox_square-blue.checked {
background-position: -48px 0;
}
.icheckbox_square-blue.disabled {
background-position: -72px 0;
cursor: default;
}
.icheckbox_square-blue.checked.disabled {
background-position: -96px 0;
}
.iradio_square-blue {
background-position: -120px 0;
}
.iradio_square-blue.hover {
background-position: -144px 0;
}
.iradio_square-blue.checked {
background-position: -168px 0;
}
.iradio_square-blue.disabled {
background-position: -192px 0;
cursor: default;
}
.iradio_square-blue.checked.disabled {
background-position: -216px 0;
}
/* Retina support */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
.icheckbox_square-blue,
.iradio_square-blue {
background-image: url(blue@2x.png);
-webkit-background-size: 240px 24px;
background-size: 240px 24px;
}
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.1/icheck.min.js"></script>
<script>
$(function() {
$('#datatable input[type=checkbox]').iCheck({
checkboxClass: 'icheckbox_square-blue',
increaseArea: '10%' // optional
});
});
</script>
<table class="table table-bordered" id="datatable">
<thead>
<tr>
<th class="text-center">Pay In Full</th>
<th class="text-center">Pay This Time</th>
</tr>
</thead>
<tfoot>
<tr class="foot">
<th></th>
<th class="text-right">
<h3 class="semibold nm mr5" id="amounttopay">$0.00</h3>
</th>
</tr>
</tfoot>
<tbody>
<tr>
<td class="text-center payinfull">
<input class="payfull" name="SPI_InvPay_Select" type="checkbox" value="109.92" />
</td>
<td class="text-center paythistime">
<div class="input-group"> <span class="input-group-addon">$</span>
<input class="form-control paynow" data-parsley-error-message="Invalid Character" data-parsley-errors-container=".one" data-parsley-pattern="^\d+(,\d{1,2})?$" type="text" />109.92
</div> <span class="one"></span>
</td>
</tr>
<tr>
<td class="text-center payinfull">
<input class="payfull" name="SPI_InvPay_Select" type="checkbox" value="6.65" />
</td>
<td class="text-center paythistime">
<div class="input-group"> <span class="input-group-addon">$</span>
<input class="form-control paynow" data-parsley-error-message="Invalid Character" data-parsley-errors-container=".two" data-parsley-pattern="^\d+(,\d{1,2})?$" type="text" />6.65
</div> <span class="two"></span>
</td>
</tr>
<tr>
<td class="text-center payinfull">
<input class="payfull" name="SPI_InvPay_Select" type="checkbox" value="16.65" />
</td>
<td class="text-center paythistime">
<div class="input-group"> <span class="input-group-addon">$</span>
<input class="form-control paynow" data-parsley-error-message="Invalid Character" data-parsley-errors-container=".two" data-parsley-pattern="^\d+(,\d{1,2})?$" type="text" />16.65
</div> <span class="two"></span>
</td>
</tr>
</tbody>
</table>
&#13;