Получить выделенные флажки и добавить к общей сложности

У меня есть три набора флажков (serviceA, B & C) с 5 флажками, каждый из которых имеет одно и то же имя класса.Получить выделенные флажки и добавить к общей сложности

Мне нужно подсчитать отмеченные флажки каждого набора, умножить их на a, b, c (другое значение для каждой службы A, B, C) и отобразить сумму всех выборов в текстовом поле, div или что угодно.

До сих пор я получаю желаемый результат, и все работает нормально, но мне бы хотелось, чтобы эксперты jquery сказали мне, есть ли лучший способ или, возможно, более короткий или даже более аккуратный способ написать код.

Вот мой код, а также на jsfiddle:

HTML:

<html> 
<body> 
serviceA1 <input type="checkbox" name="serviceA1" id="serviceA1" value="1" class="serviceA" /><br /> 
serviceA2 <input type="checkbox" name="serviceA2" id="serviceA2" value="1" class="serviceA" /><br /> 
serviceA3 <input type="checkbox" name="serviceA3" id="serviceA3" value="1" class="serviceA" /><br /> 
serviceA4 <input type="checkbox" name="serviceA4" id="serviceA4" value="1" class="serviceA" /><br /> 

serviceB1 <input type="checkbox" name="serviceB1" id="serviceB1" value="1" class="serviceB" /><br /> 
serviceB2 <input type="checkbox" name="serviceB2" id="serviceB2" value="1" class="serviceB" /><br /> 
serviceB3 <input type="checkbox" name="serviceB3" id="serviceB3" value="1" class="serviceB" /><br /> 
serviceB4 <input type="checkbox" name="serviceB4" id="serviceB4" value="1" class="serviceB" /><br /> 

<p>Total<input type="text" name="TotlCost" id="TotalCost" size="10"/></p> 
</body> 
</html>

Javascript:

$(document).ready(function() { 
    $("input:checkbox").click(function(event) { 
     var total = 0; 
     var a = 5; 
     var b = 10; 
     var c = 8; 
     var totalA = 0; 
     var totalB = 0; 
     var totalC = 0; 

     $(".serviceA:checkbox:checked").each(function() { 
      totalA += parseInt($(this).val()); 
     }); 
     $(".serviceB:checkbox:checked").each(function() { 
      totalB += parseInt($(this).val()); 
     }); 
     $(".serviceC:checkbox:checked").each(function() { 
      totalC += parseInt($(this).val()); 
     }); 

     total = totalA*a + totalB*b + totalC*c; 

     if (total == 0) { 
      $('#TotalCost').val('0'); 
     } else { 
      $('#TotalCost').val(total); 
     } 
    }); 
});

UPDATE: Кроме того, #TotalCost уже имеет значение от других выборов на странице , как я могу добавить количество меток в #TotalCost?

НОВЫЙ ДОПОЛНИТЕЛЬ: После применения принятого ответа на мой код у меня возникает еще один вопрос. Одним из элементов управления на моей форме является выбор:

<select id="symb" class="big" name="symb"> 
    <option value="1#10#6">Basic Personal</option> 
    <option value="2#20#6">Basic Family</option> 
    <option value="10#90#12">Advanced Personal</option> 
    <option value="11#120#12">Advanced Family</option> 
</select>

со средним числом в delimeted стоимости является стоимость каждого выбора. Как я могу добавить эту стоимость в поле #cost каждый раз, когда пользователь делает выбор?

источник

2012-06-20 bikey77

Я переписал ваш пример так, что он добавляет/вычитает из значения #TotalCost. Это означает, что проверка/снятие флажков должна корректно обновлять значение в #TotalCost, даже если значение из #TotalCost было установлено из другого места.

$(document).ready(function() { 
    $("input.serviceA:checkbox").click(function(event) { 
     var total = parseInt($("#TotalCost").val()); 

     if (isNaN(total)) total = 0; 

     if ($(this).attr('checked')) { 
      total += 5; 
     } else { 
      total -= 5; 
     } 

     $("#TotalCost").val(total); 
    }); 

    $("input.serviceB:checkbox").click(function(event) { 
     var total = parseInt($("#TotalCost").val()); 

     if (isNaN(total)) total = 0; 

     if ($(this).attr('checked')) { 
      total += 10; 
     } else { 
      total -= 10; 
     } 

     $("#TotalCost").val(total); 
    }); 

    $("input.serviceC:checkbox").click(function(event) { 
     var total = parseInt($("#TotalCost").val()); 

     if (isNaN(total)) total = 0; 

     if ($(this).attr('checked')) { 
      total += 8; 
     } else { 
      total -= 8; 
     } 

     $("#TotalCost").val(total); 
    }); 

});

Вышеуказанное можно почти наверняка улучшить. Например, если все флажки, где задан один и тот же класс, например,service и параметр value был обновлен, чтобы иметь значение, которое будет добавлено/вычитаются:

<html> 
<body> 
serviceA1 <input type="checkbox" name="serviceA1" id="serviceA1" value="5" class="service" /><br /> 
serviceA2 <input type="checkbox" name="serviceA2" id="serviceA2" value="5" class="service" /><br /> 
serviceA3 <input type="checkbox" name="serviceA3" id="serviceA3" value="5" class="service" /><br /> 
serviceA4 <input type="checkbox" name="serviceA4" id="serviceA4" value="5" class="service" /><br /> 

serviceB1 <input type="checkbox" name="serviceB1" id="serviceB1" value="10" class="service" /><br /> 
serviceB2 <input type="checkbox" name="serviceB2" id="serviceB2" value="10" class="service" /><br /> 
serviceB3 <input type="checkbox" name="serviceB3" id="serviceB3" value="10" class="service" /><br /> 
serviceB4 <input type="checkbox" name="serviceB4" id="serviceB4" value="10" class="service" /><br /> 

<p>Total<input type="text" name="TotlCost" id="TotalCost" size="10"/></p> 
</body> 
</html>

Вы могли бы упростить код к следующему:

$(document).ready(function() { 
    $("input.service:checkbox").click(function(event) { 
     var total = parseInt($("#TotalCost").val()); 

     var value = parseInt($(this).val()); 

     if (isNaN(total)) total = 0; 

     if ($(this).attr('checked')) { 
      total += value; 
     } else { 
      total -= value; 
     } 

     $("#TotalCost").val(total); 
    }); 
});

источник

2012-06-20 06:36:23 mttrb

Пятно на! Спасибо, мне очень понравилась простая мысль: «Если все флажки, где задан один и тот же класс, например, служба и параметр значения, были обновлены, чтобы значение было добавлено/вычитано» – bikey77

Пожалуйста, посмотрите мое последнее обновление, я добавлен новый вопрос в конце. Благодаря! – bikey77

@ bikey77 Думаю, вам, вероятно, следует задать вопрос в новом вопросе, вы можете связать это с Q & A. Вы превращаете это в разговор, который не должен работать StackOverflow. – mttrb

Использование:

$('[name=serviceA]:checked').length; 
$('[name=serviceB]:checked').length; 
$('[name=serviceC]:checked').length;

если вы хотите алле проверили вместе

$('checkbox:checked').length;

источник

2012-06-20 06:25:54

Используйте это:

$(document).ready(function() { 
    $("input:checkbox").click(function(event) { 
     var total = 0; 
     var a = 5; 
     var b = 10; 
     var c = 8; 
     var totalA = 0; 

     $("input[type=checkbox]:checked").each(function() { 
      totalA = parseInt($(this).val()); 
      if($(this).hasClass('serviceA')){ 
       total +=totalA*a; 
      } 
      if($(this).hasClass('serviceB')){ 
       total += totalA*b; 
      } 
      if($(this).hasClass('serviceC')){ 
       total +=totalA*c; 
      } 

     }); 
     if (total == 0) { 
      $('#TotalCost').val('0'); 
     } else { 
      $('#TotalCost').val(total); 
     } 

}); 
});

Здесь jsfiddle

Или вы п использовать следующее:

$(document).ready(function() { 
    $("input:checkbox").click(function() { 
     var total = 0; 
     var a = 5; 
     var b = 10; 
     var c = 8; 
     var lengthA = $(".serviceA:checkbox:checked").length; 
     var lengthB = $(".serviceB:checkbox:checked").length; 
     var lengthC = $(".serviceC:checkbox:checked").length; 
     total += lengthA*a + lengthB *b + lengthC *c; 
     $('#TotalCost').val(total); 

}); 
});

Вот Demo

источник

2012-06-20 06:36:25

@bikey: вы можете добавить общее значение totalcost. Использовать totalcost + parseInt (всего) –

вы также можете попробовать

$('input.className:checked').length;

для подсчета общего проверенного CheckBox в particuler классе CheckBox

источник

2014-08-09 09:42:30 Affan

Получить выделенные флажки и добавить к общей сложности

ответ

Смежные вопросы