如何使用jquery计算复选框值

时间:2012-04-17 05:10:50

标签: jquery html

我有值的复选框,我想计算它们的值并在点击时显示在警告框中。

我试了最后2个小时,但我不明白如何使它成为可能

<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">

$(function(){

    $('button').click(function(){

    $('count').each(function(){



        })
    })
    })

</script>

</head>

<body>

<div>
<input type="checkbox" name="count" value="5" />
<span>5</span>
</div>

<div>
<input type="checkbox" name="count" value="3" />
<span>3</span>
</div>

<div>
<input type="checkbox" name="count" value="10" />
<span>10</span>
</div>


<input type="button" value="calculate" />

</body>

6 个答案:

答案 0 :(得分:2)

这是HTML

<input type="checkbox" name="count" value="5" />
<span>5</span>
</div>

<div>
<input type="checkbox" name="count" value="3" />
<span>3</span>
</div>

<div>
<input type="checkbox" name="count" value="10" />
<span>10</span>
</div> 
    <input id="example" type="button" value="calculate" />​

这是Jquery

function recalculate(){
    var sum = 0;
    $("input[type=checkbox]:checked").each(function(){
      sum += parseInt($(this).attr("value"));
    });

    alert(sum);
}

$(function(){

    $('#example').click(function(){

        recalculate();

    });
});​

请参阅此JSFiddle:http://jsfiddle.net/nEGTv/22/

答案 1 :(得分:1)

你的意思是:


$(document).ready(function() {
  var total = 0;
  $("input[type='button']").click(function() { // you can use id for the button
    $("input[name='count']").each(function() {
       total += parseInt($(this).val(), 10);
    });
    alert(total);
  });
});

答案 2 :(得分:1)

试试这个我希望有所帮助

    <script type="text/javascript">
    $(document).ready(function() {


        $('button').click(function(){
             var total=0;
        $("input[type=checkbox]").each( 
        function() { 
           total=total+parseInt($(this).val());

        } );
    alert(total);
        });
 });
</script>

答案 3 :(得分:1)

$('input[type=button]').click(function(){
    result = 0;
    $('input[name=count]:checked').each(function(){
        result = Number(result) + Number($(this).val()); 
    });
    alert(result);
});

答案 4 :(得分:1)

$('input[type=button]').on('click',function(){
    var tot=0;
    $("input[name=count]:checked").each(function() {
         tot += parseInt( $(this).prop('value'), 10 );
    });
    alert(tot);
});

see demo

答案 5 :(得分:0)

$(document).ready( function() {
  $('.chkOptions').click(
    function () {
      var ntot = 0;
      $('.chkOptions:checked').each(function () {
        ntot += parseInt($(this).val());
      });
      $('#txtSavingsTot').val(ntot);
    })
  .change();
});