CODEWITHSUNDEEP
javascriptjquerycheckbox
KID
KID

Reputation: 25

Show Hide button, atleast one checkbox is checked

When I check one or many boxes it shows the buttons "btns" but if i uncheck one it hides them, how do I get it to stay if one or many checkbox is still checked

<input type='checkbox' class='checklist' name='id[]' value='$id' />
<input type='checkbox' class='checklist' name='id[]' value='$id' />
<input type='checkbox' class='checklist' name='id[]' value='$id' />
<input type='checkbox' class='checklist' name='id[]' value='$id' />

$(".btns").hide();

$(".checklist").click(function() {
    if($(this).is(":checked")) {
        $(".btns").show();
    } else {
        $(".btns").hide();
    }
});

Upvotes: 1

Views: 1686

Answers (2)

kind user
kind user

Reputation: 41893

You can check for the amount of checked checkboxes. If it's length is 0 - hide the element, if not - show it.

$(".checklist").click(function() {
  $('.btns').toggle( $(".checklist:checked").length > 0 );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='checkbox' class='checklist' name='id[]' value='$id' />
<input type='checkbox' class='checklist' name='id[]' value='$id' />
<input type='checkbox' class='checklist' name='id[]' value='$id' />
<input type='checkbox' class='checklist' name='id[]' value='$id' />

<p class='btns' hidden>btns</p>

Upvotes: 2

Osama
Osama

Reputation: 3040

$(".checklist").click(function() {
var check_count=$(".checklist:checked");
if(check_count.length>0){$(".btns").show();}
else{$(".btns").hide();}
});

It check if any of checklist check so show .btns else hide it

Upvotes: 0

Related Questions