Сумма инпутов
Как в result2 составить сумму инпут, возле которых отмечены чекбоксы?
<input type="checkbox" name="n1" value="1" id="n1" /><input type="text" name="f1" id="f1" value="100"><br /> <input type="checkbox" name="n2" value="2" id="n2" /><input type="text" name="f2" id="f2" value="30"><br /> <input type="checkbox" name="n3" value="3" id="n3" /><input type="text" name="f3" id="f3" value="60"><br /> <input type="checkbox" name="n4" value="4" id="n4" /><input type="text" name="f4" id="f4" value="50"><br /> <input id="result"><input id="result2">
<script>
$("input").click(function() {
var sum = 0;
$("input:checked").each(function(){
sum+= +$(this).val();
});
$('#result').val(sum);
});
</script>
|
<input type="checkbox" name="n1" value="1" id="n1" /><input type="text" name="f1" id="f1" value="100"><br />
<input type="checkbox" name="n2" value="2" id="n2" /><input type="text" name="f2" id="f2" value="30"><br />
<input type="checkbox" name="n3" value="3" id="n3" /><input type="text" name="f3" id="f3" value="60"><br />
<input type="checkbox" name="n4" value="4" id="n4" /><input type="text" name="f4" id="f4" value="50"><br />
<input id="result"><input id="result2">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$("input").click(function() {
var sum = 0, sum2 = 0;
$("input:checked").each(function(){
sum+= +$(this).val();
sum2 += +$(this).next().val();
});
$('#result').val(sum);
$('#result2').val(sum2);
});
</script>
|
Dilettante_Pro,
спасибо большое, еще одно, между инпутами есть спан, можно сделать чтобы при клике по спану, отмечался чекбокс?
<input type="checkbox" name="n1" value="1" id="n1" /><span>100</span><input type="hidden" name="f1" id="f1" value="100"><br />
<input type="checkbox" name="n2" value="2" id="n2" /><span>30</span><input type="hidden" name="f2" id="f2" value="30"><br />
<input type="checkbox" name="n3" value="3" id="n3" /><span>60</span><input type="hidden" name="f3" id="f3" value="60"><br />
<input type="checkbox" name="n4" value="4" id="n4" /><span>50</span><input type="hidden" name="f4" id="f4" value="50"><br />
<input id="result"><input id="result2">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$("input").click(function() {
var sum = 0, sum2 = 0;
$("input:checked").each(function(){
sum+= +$(this).val();
sum2 += +$(this).next().next().val();
});
$('#result').val(sum);
$('#result2').val(sum2);
});
</script>
|
Sav2907,
а может, лишнее убрать?
<label><input type="checkbox" name="n1" value="1" id="n1" />100</label><br />
<label><input type="checkbox" name="n2" value="2" id="n2" />30</label><br />
<label><input type="checkbox" name="n3" value="3" id="n3" />60</label><br />
<label><input type="checkbox" name="n4" value="4" id="n4" />50</label><br />
<input id="result"><input id="result2">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$("input").click(function() {
var sum = 0, sum2 = 0;
$("input:checked").each(function(){
sum+= +$(this).val();
sum2 += +$(this).parent().text();
});
$('#result').val(sum);
$('#result2').val(sum2);
});
</script>
|
Dilettante_Pro,
Спасибо, а если это таблица, можно по клику tr?
<table style="width: 300px; background: #E6E6E6;">
<tr><td><label><input type="checkbox" name="n1" value="1" id="n1" />100</label></td></tr>
<tr><td><label><input type="checkbox" name="n2" value="2" id="n2" />30</label></td></tr>
<tr><td><label><input type="checkbox" name="n3" value="3" id="n3" />60</label></td></tr>
<tr><td><label><input type="checkbox" name="n4" value="4" id="n4" />50</label></td></tr>
</table>
<input id="result"><input id="result2">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$("input").click(function() {
var sum = 0, sum2 = 0;
$("input:checked").each(function(){
sum+= +$(this).val();
sum2 += +$(this).parent().text();
});
$('#result').val(sum);
$('#result2').val(sum2);
});
</script>
|
Еще что придумаете?
<table border="1" style="width: 300px; background: #E6E6E6;">
<tr><td><label><input type="checkbox" name="n1" value="1" id="n1" />100</label></td></tr>
<tr><td><label><input type="checkbox" name="n2" value="2" id="n2" />30</label></td></tr>
<tr><td><label><input type="checkbox" name="n3" value="3" id="n3" />60</label></td></tr>
<tr><td><label><input type="checkbox" name="n4" value="4" id="n4" />50</label></td></tr>
</table>
<input id="result"><input id="result2">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$('tr').click(function() {
$(this).find('input').click();
});
$("label").click(function(event) {
event.stopPropagation();
});
$("input").click(function(event) {
event.stopPropagation();
var sum = 0, sum2 = 0;
$("input:checked").each(function(){
sum+= +$(this).val();
sum2 += +$(this).parent().text();
});
$('#result').val(sum);
$('#result2').val(sum2);
});
</script>
|
Dilettante_Pro,
это все, спасибо |
Dilettante_Pro,
почему не так?
<table border="1" style="width: 300px; background: #E6E6E6;">
<tr><td><label><input type="checkbox" name="n1" value="1" id="n1" />100</label></td></tr>
<tr><td><label><input type="checkbox" name="n2" value="2" id="n2" />30</label></td></tr>
<tr><td><label><input type="checkbox" name="n3" value="3" id="n3" />60</label></td></tr>
<tr><td><label><input type="checkbox" name="n4" value="4" id="n4" />50</label></td></tr>
</table>
<input id="result"><input id="result2">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$('tr').click(function() {
$(this).find('input').click();
});
$("input").click(function() {
var sum = 0, sum2 = 0;
$("input:checked").each(function(){
sum+= +$(this).val();
sum2 += +$(this).parent().text();
});
$('#result').val(sum);
$('#result2').val(sum2);
});
</script>
|
Sav2907,
Цитата:
(точнее, работает, но дважды - из-за всплывания события. Поэтому выбор срабатывает и отменяется) |
| Часовой пояс GMT +3, время: 03:36. |