CODEWITHSUNDEEP
jquerycheckbox
jeeperscreepers
jeeperscreepers

Reputation: 143

Check to see if checkboxes are check and then check another checkbox

I have a web page which has 6 checkboxes on it.

<input type="checkbox" name="chk1" id="chk1" class="chkbox"/>
<input type="checkbox" name="chk2" id="chk2" class="chkbox"/>
<input type="checkbox" name="chk3" id="chk3" class="chkbox"/>
<input type="checkbox" name="chk4" id="chk4" class="chkbox"/>
<input type="checkbox" name="chk5" id="chk5" class="chkbox"/>
<input type="checkbox" name="chk6" id="chk6" class="chkbox"/>

Using jquery how can I check to see if all of these 6 checkboxes are checked and if all 6 are checked check checkbox number 7: 

<input type="checkbox" name="chk7" id="chk7" class="chkbox"/>

I have started to write the function but not sure if this is the best way to do this:

    function AllSectionsChecked {
        var isChecked1 = $('##chk1').attr('checked')?true:false;
        var isChecked2 = $('##chk2').attr('checked')?true:false;
        var isChecked3 = $('##chk3').attr('checked')?true:false;
        var isChecked4 = $('##chk4').attr('checked')?true:false;
        var isChecked5 = $('##chk5').attr('checked')?true:false;    
        var isChecked6 = $('##chk6').attr('checked')?true:false;                    
    }

Any help would be appreciated. I am guessing its pretty much straight forward but just looking for the best way to accomplish this in jquery.

UPDATE: *The ids and names are created dynaically and may not be in any order or scale so an id maybe chk51 and the next one maybe chk205, Appologies I should have put this in my original post * Thankyou for your suggestions so far.

many thanks

Upvotes: 1

Views: 466

Answers (5)

Vishal Suthar
Vishal Suthar

Reputation: 17193

This is the way: Fiddler Demo

<input id="1" name="1" class="chkbox" type="checkbox" />
<input id="2" name="2" class="chkbox" type="checkbox" />
<input id="3" name="3" class="chkbox" type="checkbox" />
<input id="4" name="4" class="chkbox" type="checkbox" />
<br />
<input id="5" name="5" class="chkbox" type="checkbox" />

$('input[type="checkbox"]').on('change', function() {
if (!$('input.paid[type=checkbox]:not(:checked)').length)
    $('input[name=5]').attr('checked','checked');
else
    $('input[name=5]').attr('checked',false);
})

Upvotes: 0

adeneo
adeneo

Reputation: 318182

Assuming the ID of the last checkbox should be chk7 and not chk5 ?

$('#chk7').prop('checked', $('input[type="checkbox"]:lt(6):checked').length == 6);

DEMONSTRATION

Upvotes: 1

sp00m
sp00m

Reputation: 48807

If you add a specific class to the checkboxes you wanna check (let's say need), you could use the :checked selector as follow:

$("#chk7").prop("checked", $(".need:checked").length === 6);

Upvotes: 0

VisioN
VisioN

Reputation: 145388

How about that?

$("#chk7").prop("checked", $(".chkbox").filter(function() {
    return /^chk[1-6]$/.test(this.id) && this.checked;
}).length == 6);

DEMO: http://jsfiddle.net/FbQUF/

Upvotes: 1

Mihai Matei
Mihai Matei

Reputation: 24276

var checked = true;
$('.chkbox').each(function(){
   if($(this).is(':checked')) {
       alert('Element with id ' + $(this).attr('id') + ' is checked');
   } else {
       alert('Element with id ' + $(this).attr('id') + ' is unchecked');
       checked = false;
   }
});

if(checked)
     $('#checkbox7').attr("checked","checked");

Upvotes: 0

Related Questions