How can I get values from checkbox and count clicked items with javascript

Question

I need to get values for each checkbox and break movement to another page if the user doesn't check any box.

there is an error but I cant recognize it

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

and this html page when load ajax

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

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



     </div> 
     </form>

and this code reloade by ajax in page 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>

i send checked item to anther page but i need to check if didn't check any of this before submit also this checkbox reloaded by Ajax , because i created code by Ajax so this checkbox are dynamic — Reiozaghi, Sep 22 '12 at 12:51

Snake Eyes · Answer 1 · 2012-09-22T19:05:12.070

1

try these (correct code)

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

and

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

read http://api.jquery.com/checked-selector/

edited Sep 22 '12 at 19:05

answered Sep 22 '12 at 12:20

Snake Eyes

16,287
34
113
221

Bergi · Accepted Answer · 2012-09-22T15:01:50.473

That's simple:

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

I'm not sure what the for-loop is doing in your code as you already have the each().

Now you can easily get the count in your submit handler, if it equals 0 prevent the submit.

Also, you shouldn't use submit buttons if you want checkboxes; and you can't use an id multiple times (it needs to be unique), use the name attribute instead:

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

i send checked item to anther page but i need to check if didn't check any of this before submit also this checkbox reloaded by Ajax , because i created code by Ajax — Reiozaghi, Sep 22 '12 at 12:49
Please show us the code for this ajax thing and also the checkboxes in your question — Bergi, Sep 22 '12 at 12:52
I guess you want this (see extended answer), if not please show me the *entire* form. If those checkboxes are loaded dynamically (into a different form?) you should use delegated events — Bergi, Sep 22 '12 at 15:03

score 0 · Answer 3 · edited May 23 '17 at 11:44

you can get by .is(':checked')

and get checked by

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

Good Learn

Sahil Kapoor · Answer 4 · 2012-09-22T12:39:05.370

0

I don't see any checkboxes in the html you provided and also all the 4 submit buttons have the same ID value which is wrong. This might be the reason why it is not working. Also you can modify your js code to get correct count for checked checkboxes

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

edited Sep 22 '12 at 12:39

answered Sep 22 '12 at 12:33

Sahil Kapoor

604
4
9

How can I get values from checkbox and count clicked items with javascript

4 Answers4