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
– Reiozaghi, Commented Sep 22, 2012 at 12:51

Bergi · Accepted Answer · 2012-09-22 15:01:50Z

1

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

edited Sep 22, 2012 at 15:01

answered Sep 22, 2012 at 12:26

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Reiozaghi Over a year ago

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

Bergi Over a year ago

Please show us the code for this ajax thing and also the checkboxes in your question

Bergi Over a year ago

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

Snake Eyes · Accepted Answer · 2012-09-22 19:05:12Z

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, 2012 at 19:05

answered Sep 22, 2012 at 12:20

Snake Eyes

16.8k39 gold badges120 silver badges235 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:44:01Z

0

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

edited May 23, 2017 at 11:44

CommunityBot

11 silver badge

answered Sep 22, 2012 at 12:17

Mayank K. Swami

57.3k23 gold badges130 silver badges148 bronze badges

Comments

Sahil Kapoor · Accepted Answer · 2012-09-22 12:39:05Z

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, 2012 at 12:39

answered Sep 22, 2012 at 12:33

Sahil Kapoor

6144 silver badges9 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related