Соберите значения флажков с помощью jQuery
У меня есть веб-сайт для предсказания футбольных результатов. Каждый футбольный матч имеет три флажка.
1-Победа первой команды(1checkbox)
2-Вторая победа команды(1checkbox)
3-равно(1флажок)
На одной странице 10 футбольных матчей. Итак, на странице у меня есть 30 флажков. Пользователь может установить все три флажка для каждого футбольного матча.
Мне нужен код jQuery для работы, как этот сайт:
https://web.archive.org/web/20100529040418/http://www.bwin90.com/
если вы установите два или три флажка в футбольном матче, цифры будут расти в геометрической прогрессии. Мои html и php коды:
<form method = "POST">
<div class = "form-group mt-4">
<div class = "w-100 p-3">
<table class = "table">
<thead class = "thead-dark">
<tr>
<th class = "text-center" scope = "col"></th>
<th class = "text-center" scope = "col">team1</th>
<th class = "text-center" scope = "col">equal</th>
<th class = "text-center" scope = "col">team2</th>
<th class = "text-center" scope = "col"></th>
</tr>
</thead>
<tbody>
<form>
<?php
$get_teams1 = "SELECT * FROM teams WHERE show_match=1 ORDER BY team_id DESC";
$get_teams2 = mysqli_query($conn, $get_teams1);
while($get_teams3=mysqli_fetch_assoc($get_teams2))
{
echo'
<tr>
<td class = "text-right"><input type = "checkbox" class = "qty1 form-check-input" value = "20" id = "exampleCheck1"></td><td class = "text-center">'.$get_teams3["mizban"].'</td>
<td class = "text-center"><input type = "checkbox" class = "qty1 form-check-input" id = "exampleCheck1"></td>
<td class = "text-center">'.$get_teams3["mihman"].'</td><td class = "text-right"><input type = "checkbox" class = "qty1 form-check-input" id = "exampleCheck1"></td>
</tr>
';
}
?>
<input type = "text" class = "total" value = "" />
</form>
</tbody>
</table>
<button type = "button" class = "btn btn-dark mt-2 w-100" name = "register3" />
<h5>ثبت فرم</h5>
</button>
</div>
</div>
</form>
Мои коды jquery:
<script>
$(document).ready(function(){
$(document).on("change", ".qty1", function() {
var sum = 0;
$(".qty1").each(function(){
sum += +$('.qty1').val();
});
$(".total").val(sum);
});
});
</script>
В конце я хочу мгновенно отображать сумму затрат, установив флажки.
@AndrejsGubars спасибо за ответ. Я не получаю ошибку. Я не могу создать форму, похожую на образец ссылки.
Так в чем проблема? Вы пытались и потерпели неудачу? если вам нужна помощь, в идеале вы можете предоставить рабочий фрагмент
@AndrejsGubars Пожалуйста, посмотрите ссылку и скажите, как это сделать?
Эмм, мы здесь, чтобы помочь с проблемами, а не выполнять вашу работу. Пожалуйста, сначала попробуйте сами, а затем, когда у вас возникнут проблемы, вы можете вежливо спросить. SO — это не служба кодирования, это дружелюбное сообщество разработчиков, помогающих друг другу.
Ответы 1
вы можете попробовать что-то вроде этого
Html Code
<table class = "table table-bordered" id = "filltable">
<tr>
<td>demo <input type = "checkbox" id = "chk1" value = "10" onchange = "add(1,10)"/></td>
<td>demo1 <input type = "checkbox" id = "chk2" value = "10" onchange = "add(2,10)" /></td>
<td>demo2 <input type = "checkbox" id = "chk3" value = "10" onchange = "add(3,10)"/></td>
<td>demo3 <input type = "checkbox" id = "chk4" value = "10" onchange = "add(4,10)"/></td>
</tr>
</table>
and Jquery Code:
var sum = 0;
function add(id,value) {
if ($('#chk' + id).prop('checked') == true) {
sum= sum + value
}
else {
sum= sum - value
}
alert(sum);
}
Пожалуйста, подскажите, как сделать следующее: если пользователь выбирает два или три флажка в каждой строке, переменная суммы удваивается и утраивается
Вы получаете ошибки? ничего не возвращается? можно немного конкретнее с вашей проблемой.