1

3セットのチェックボックス（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);
        }
    });
});​

更新：また、＃TotalCostには、ページ上の他の選択からの値がすでにあります。チェックボックスの合計を#TotalCostに追加するにはどうすればよいですか？

新しい追加：受け入れられた回答をコードに適用した後、別の質問があります。私のフォームのコントロールの1つは選択です：

<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フィールドに追加するにはどうすればよいですか？

4

4 に答える 4

2

あなたも試してみます

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

参加者のチェックボックスクラスでチェックされたチェックボックスの合計をカウントする

于 2014-08-09T09:42:30.420 に答える
1

使用する：

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

みんなで一緒にチェックしたいなら

$('checkbox:checked').length;
于 2012-06-20T06:25:54.263 に答える
1

の値を加算/減算するように例を書き直しました#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-20T06:36:23.043 に答える
1

これを使って ：

$(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);

});
});​

これがデモです

于 2012-06-20T06:36:25.667 に答える