如何从复选框中获取值并使用javascript计算单击的项目

时间:2012-09-22 12:15:57

标签: javascript jquery

我需要获取每个复选框的值,如果用户没有勾选任何框,则将其移动到另一个页面。

有错误,但我无法识别

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

        if($('#Search').val() == "")
        {alert('please enter your domain without Extuntison');return false;}

        results.style.display = 'none';
        $('#results').html('');
        loading.style.display = 'inline';

        $.post('../domain_checker/process.php?domain=' + escape($('#Search').val()),{
        }, function(response){


            results.style.display = 'block';
            $('#results').html(unescape(response)); 
            loading.style.display = 'none';

            //$('#results').animate({height : '450px' }, 2000);

            results.style.height = '400px';
        });

        return false;
    });


       $(function(){
          $('#order_Now').click(function(){
             var count = $("[type='checkbox']:checked").length;
             var val = [];
             for(i=0;i<count;i++){
                $(':checkbox:checked').each(function(i){
                   val[i] = $(this).val();
                });
             }      
          });
       });

和加载ajax时的这个html页面

 <form action="ordedomain.php" name="formdomain" method="post" id="formdomain"  onclick="check_domain_checkBox()">

     <div id="results" style="width:450px;" align="left">



     </div> 
     </form>

此代码由页面php中的ajax重新编写

       <form action="ordedomain.php" name="formdomain" method="post" id="formdomain"  onclick="check_domain_checkBox()">

<input type="checkbox" value="a" id="arrDomain" name="arrDomain">a
<input type="checkbox" value="b" id="arrDomain" name="arrDomain">b
<input type="checkbox" value="c" id="arrDomain" name="arrDomain">c

        </form>

4 个答案:

答案 0 :(得分:1)

尝试这些(正确的代码)

 var count = $("input[type='checkbox']:checked").length;

  $("input[type='checkbox']:checked").each(function(i){

阅读http://api.jquery.com/checked-selector/

答案 1 :(得分:1)

这很简单:

var vals = [];
$(":checkbox").each(function() {
    if (this.checked)
       vals.push(this.value);
});
var count = vals.length;

我不确定for - 循环在代码中的作用,因为您已经拥有each()

现在,您可以轻松获取submit处理程序中的计数,如果它等于0则阻止提交。

此外,如果您需要复选框,则不应使用提交按钮;并且您不能多次使用id(它必须是唯一的),而是使用name属性:

<form action="ordedomain.php" name="formdomain" method="post" id="formdomain">
  <label><input type="checkbox" name="domain" value="1"> Order now 1</label>
  <label><input type="checkbox" name="domain" value="2"> Order now 2</label>
  <label><input type="checkbox" name="domain" value="3"> Order now 3</label>
  <label><input type="checkbox" name="domain" value="4"> Order now 5</label>
  <input type="text" id="search" name="search">
  <div id="results" style="display:none;"></div>
  <img id="loading" src="…" style="display:none;"></div>
</form>
// onDOMready
var form = $("#formdomain"),
    search = form.find("#search"),
    checkboxes = form.find(":checkbox"),
    results = form.find("#results"),
    loading = form.find("#loading");
form.submit(function(evt) {
    var sval = search.val(),
        checked = checkboxes.filter(":checked"),
        dvals = [];
    if (!sval) {
        alert("Please enter domain (without extension)");
    } else if (!checked.length) {
        alert("Please tick at least one domain extension");
    } else {
        checked.each(function() {
            dvals.push(this.value);
        });
        $.post('../domain_checker/process.php', {
            domain: sval,
            extensions: dvals
        }, function(resonse) {
            loading.hide();
            results.html(response).show();
        });
        loading.show();
        results.hide();
    }
    evt.preventDefault();
});

答案 2 :(得分:0)

你可以通过.is(':checked')

获得

并通过

进行检查

jquery的

$("#test").click(function() {
var total_c = 0;
    $.each($("input[type=checkbox]:checked"), function (k, v){
    var val =parseFloat($(this).val());
    tot = parseFloat(total_c+ val);   
    })
        alert(total_c);
});

html

<input type="buttoN" id="test" value="click me"/>

良好的学习

  1. jquery checkbox value
  2. count values of checked checkbox

答案 3 :(得分:0)

我在您提供的html中没有看到任何复选框,而且所有4个提交按钮都具有相同的ID值,这是错误的。这可能是它无法正常工作的原因。您还可以修改您的js代码以获得已选中复选框的正确计数

var vals = [];
$(":checkbox:checked").each(function() {
       vals.push($(this).val());
});