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

Posted 2023-03-05

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

【英文标题】：How can I get values from checkbox and count clicked items with javascript

【发布时间】：2012-09-14 15:37:28

【问题描述】：

如果用户没有选中任何复选框，我需要获取每个复选框的值并中断移动到另一个页面。

有一个错误，但我无法识别它

$('#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>

此代码通过 ajax 在页面 php 中重新加载

       <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>

【问题讨论】：

我将选中的项目发送到另一个页面，但我需要检查是否在提交之前没有检查任何这些，然后再提交这个由 Ajax 重新加载的复选框，因为我由 Ajax 创建了代码，所以这个复选框是动态的跨度>

【参考方案1】：

这很简单：

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

我不确定for-loop 在你的代码中做了什么，因为你已经有了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();
);

【讨论】：

我将检查过的项目发送到另一个页面，但我需要检查是否在提交之前没有检查任何这些，然后再提交这个由 Ajax 重新加载的复选框，因为我通过 Ajax 创建了代码

请向我们展示这个 ajax 的代码以及您问题中的复选框

我猜你想要这个（见扩展答案），如果不是，请给我看整个表格。如果这些复选框是动态加载的（以不同的形式？）你应该使用委托事件

【参考方案2】：

试试这些（正确的代码）

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

和

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

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

【参考方案3】：

您可以通过.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"/>

好好学习

jquery checkbox value count values of checked checkbox

【参考方案4】：

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

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