Hide button when no checkbox is checked and show button if Check All is clicked or one or more checkbox is clicked

Question

I have a code here about hiding and showing the button whenever I checked or unchecked a checkbox. I made a two button with the same equivalent.

The first button will show if one or more checkbox was checked and hide when no checkbox was checked. But once I unchecked a checkbox the button will be hidden even there's still a checkbox that has been checked.
The second button will show if the All which means Check All was clicked and if None the button will be hidden.

So here's the problem:

When you checked a checkbox the button will show even you checked multiple checkbox the button is still there but once you unchecked a checkbox even there still checked checkbox the button will be hidden.
Another is when you clicked the All it will checked all the checkbox and a button will show even you unchecked a checkbox as long as there's still checked checkbox the button will stay but once you checked a checkbox another button shows up and two buttons will be there already.

Here's the code for the form with checkboxes:

<form id="drawing" action="" method="post">
                <div id="sub_profile_cont">
                    <div class="sub_profile right">
                        <p class="sub_content_text" style='margin-left: 25px;'>
                            <a href="javascript:selectToggle(true, 'drawing');" id="show">All</a> | <a href="javascript:selectToggle(false, 'drawing');" id="hide">None</a>
                             MISCELLANEOUS FEES:
                        </p>
                        <?php
                            if($pta_fee == $pta_fee_trans)
                            {
                        ?>
                        <p class="sub_content_text" style='margin-left: 30px; color: #93BCCB;'>
                            <input type='checkbox' value="<?php echo $pta_fee; ?>" disabled>
                            PTA Fee : &#8369; <?php echo $pta_fee; ?></p>
                        <?php
                            }
                            else
                            {
                        ?>
                        <p class="sub_content_text" style='margin-left: 30px;'>
                            <input type='checkbox' name='draw[]' value="<?php echo $pta_fee; ?>" id="required-checkbox1" onClick="CheckIfChecked(this.id)">
                            PTA Fee : &#8369; <?php echo $pta_fee; ?></p>
                        <?php
                            }
                            if($maintenance_fee == $maintenance_fee_trans)
                            {
                        ?>
                        <p class="sub_content_text" style='margin-left: 30px; color: #93BCCB;'>
                            <input type='checkbox' value="<?php echo $maintenance_fee; ?>" disabled>
                            Maintenance Fee : &#8369; <?php echo $maintenance_fee; ?></p>
                        <?php
                            }
                            else
                            {
                        ?>
                        <p class="sub_content_text" style='margin-left: 30px;'>
                            <input type='checkbox' name='draw[]' value="<?php echo $maintenance_fee; ?>" id="required-checkbox2" onClick="CheckIfChecked(this.id)">
                            Maintenance Fee : &#8369; <?php echo $maintenance_fee; ?></p>
                        <?php
                            }
                            if($id_school == $id_school_trans)
                            {
                        ?>
                        <p class="sub_content_text" style='margin-left: 30px; color: #93BCCB;'>
                            <input type='checkbox' value="<?php echo $id_school; ?>" disabled>
                            School ID : &#8369; <?php echo $id_school; ?></p>
                        <?php
                            }
                            else
                            {
                        ?>
                        <p class="sub_content_text" style='margin-left: 30px;'>
                            <input type='checkbox' name='draw[]' value="<?php echo $id_school; ?>" id="required-checkbox3" onClick="CheckIfChecked(this.id)">
                            School ID : &#8369; <?php echo $id_school; ?></p>
                        <?php
                            }
                            if($electricity == $electricity_trans)
                            {
                        ?>
                        <p class="sub_content_text" style='margin-left: 30px; color: #93BCCB;'>
                            <input type='checkbox' value="<?php echo $electricity; ?>" disabled>
                            Electricity : &#8369; <?php echo $electricity; ?></p>
                        <?php
                            }
                            else
                            {
                        ?>
                        <p class="sub_content_text" style='margin-left: 30px;'>
                            <input type='checkbox' name='draw[]' value="<?php echo $electricity; ?>" id="required-checkbox4" onClick="CheckIfChecked(this.id)">
                            Electricity : &#8369; <?php echo $electricity; ?></p>
                        <?php
                            }
                        ?>
                        <div id="sub_profile_cont">
                            <div class="sub_profile left">
                                <p class="block_cont left">
                                    <!--<input style="background: linear-gradient(rgb(20, 129, 191), rgb(13, 89, 160)); color: #ccc;" class="action_btn" type="button" id="pay_btn" value="COMPUTE" title="Select at least one" disable/>-->
                                    <div id = "submit-button-container" style="display:none; "margin-bottom: -6px;"">
                                        <input class="action_btn" type="submit" name="submit" id="pay_btn" value="COMPUTE" onClick="setUpdateAction();"/>
                                    </div>
                                    <b style="display: none";>
                                        <input class="action_btn" type="submit" name="submit" id="pay_btn" value="COMPUTE" onClick="setUpdateAction();"/>
                                    </b>
                                    <!--<input class="action_btn" type="hidden" name="button" id="pay_btn" value="COMPUTE" onClick="setUpdateAction();"/>-->
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            </form>

Here's my script for the buttons:

This script is for checking checkbox one by one:

<script language="javascript">
        function validate()
        {
        var chks = document.getElementsByName('draw[]');
        var hasChecked = false;
        for (var i = 0; i < chks.length; i++)
        {
            if (chks[i].checked)
            {
            hasChecked = true;
            break;
            }
        }

        if (hasChecked == false)
            {
            alert("Please select at least one.");
            return false;
            }

        return true;
        }
    </script>

Here's the script for All checked all checkbox:

<script type="text/javascript">
function CheckIfChecked(id)
{
   var CheckboxID = id;
   var SubmitButtonContainerID = "submit-button-container";
   if( document.getElementById(CheckboxID).checked ) { document.getElementById(SubmitButtonContainerID).style.display = "block"; }
   else { document.getElementById(SubmitButtonContainerID).style.display = "none"; }
}
CheckIfChecked();

The output should be when I unchecked a checkbox, if one or more checkbox are still checked the button will stay. Another is if I clicked the All all checkbox will be checked but if I unchecked one checkbox and then checked it again onl

Dont know how this is a `sql` question. have you try something in jquery like [**This**](http://stackoverflow.com/questions/2228382/select-all-checkboxes-with-jquery) — Juan Carlos Oropeza, Sep 08 '15 at 17:27
I'm sorry there's an error in submitting the question and the tagging. But I use this in javascript — Jae Eun, Sep 08 '15 at 17:30
As the PHP has no affect on this question, could you give us the HTML that the PHP generates instead of the PHP? And perhaps remove the PHP tag? — Anders, Sep 08 '15 at 17:38
Have you thought of having a global variable that counts how many checkbox are checked? When a checkbox get checked add one to that variable, when a checkcbox get unchecked substract one. If check all is pressed, set that variable to the total quantity of checkboxes. If check all is pressed second time (unchecking all), set it to 0. And, to know what button(s) to display, you only need to compare the value of that variable. Did I make myself clear? — pablito.aven, Sep 08 '15 at 18:12

Vadim · Answer 1 · 2015-09-08T18:28:43.210

try this, but before you need to set jquery lib, for example like this <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<input type="checkbox">1
<input type="checkbox">2
<button style="display: none" id="one">one or more checked</button>
<button style="display: none" id="all">all checked</button>
<script>
$(function(){
    $('[type=checkbox]').click(function ()
    {
        var checkedChbx = $('[type=checkbox]:checked');
        if (checkedChbx.length > 0)
        {
            $('#one').show();
        }
        else
        {
            $('#one').hide();
        }

        if (checkedChbx.length == $('[type=checkbox]').length)
        {
            $('#all').show();
        }
        else
        {
            $('#all').hide();
        }
    });
});
</script>

score 0 · Accepted Answer · answered Sep 08 '15 at 18:37

Your Question is hard to understand,but i guess the following code will help you.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<form id="drawing" action="" method="post">
                <div id="sub_profile_cont">
                    <div class="sub_profile right">
                        <p class="sub_content_text" style='margin-left: 25px;'>
                            <a href="javascript:selectToggle(true, 'drawing');" id="show" onclick="checkALL();">All</a> | <a href="javascript:selectToggle(false, 'drawing');" id="hide" onclick="unCheckALL();">None</a>
                             MISCELLANEOUS FEES:
                        </p>



                        <p class="sub_content_text" style='margin-left: 30px;'>
                            <input type='checkbox' name='draw[]' value="" id="required-checkbox1" onClick="CheckIfChecked()">
                            PTA Fee : &#8369; </p>


                        <p class="sub_content_text" style='margin-left: 30px;'>
                            <input type='checkbox' name='draw[]' value="" id="required-checkbox2" onClick="CheckIfChecked()">
                            Maintenance Fee : &#8369; </p>


                        <p class="sub_content_text" style='margin-left: 30px;'>
                            <input type='checkbox' name='draw[]' value="" id="required-checkbox3" onClick="CheckIfChecked()">
                            School ID : &#8369;</p>



                        <p class="sub_content_text" style='margin-left: 30px;'>
                            <input type='checkbox' name='draw[]' value="" id="required-checkbox4" onClick="CheckIfChecked()">
                            Electricity : &#8369; </p>

                        <div id="sub_profile_cont">
                            <div class="sub_profile left">
                                <p class="block_cont left">
                                    <!--<input style="background: linear-gradient(rgb(20, 129, 191), rgb(13, 89, 160)); color: #ccc;" class="action_btn" type="button" id="pay_btn" value="COMPUTE" title="Select at least one" disable/>-->
                                    <div id = "first_button" style="display:none; "margin-bottom: -6px;"">
                                        <input class="action_btn" type="submit" name="submit" id="pay_btn" value="COMPUTE" onClick="setUpdateAction();"/>
                                    </div>
                                    <b style="display: none"; id="second_button">
                                        <input class="action_btn" type="submit" name="submit" id="pay_btn" value="COMPUTE" onClick="setUpdateAction();"/>
                                    </b>
                                    <!--<input class="action_btn" type="hidden" name="button" id="pay_btn" value="COMPUTE" onClick="setUpdateAction();"/>-->
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            </form>


<script type="text/javascript">
function checkALL(){
    var chk_arr =  document.getElementsByName("draw[]");        
    for(k=0;k< chk_arr.length;k++)
    {
        chk_arr[k].checked = true;
    } 
CheckIfChecked();
}

function unCheckALL(){
    var chk_arr =  document.getElementsByName("draw[]");             
    for(k=0;k< chk_arr.length;k++)
    {
        chk_arr[k].checked = false;
    } 
    CheckIfChecked();
}

function checkAny(){
    var chk_arr =  document.getElementsByName("draw[]");             
    for(k=0;k< chk_arr.length;k++)
    {
        if(chk_arr[k].checked==true){
        return true;
        }
    } 
    return false;
}

function isCheckAll(){
    var chk_arr =  document.getElementsByName("draw[]");             
    for(k=0;k< chk_arr.length;k++)
    {
        if(chk_arr[k].checked==false){
        return false;
        }
    } 
    return true;
}

function showFirstButton(){
    document.getElementById('first_button').style.display = "block"; 
}
function hideFirstButton(){
    document.getElementById('first_button').style.display = "none"; 
}
function showSecondButton(){
    document.getElementById('second_button').style.display = "block"; 
}
function hideSecondButton(){
    document.getElementById('second_button').style.display = "none"; 
}


function CheckIfChecked(){
checkAny() ? showFirstButton():hideFirstButton();
isCheckAll() ? showSecondButton():hideSecondButton();
}

</script>
</body>
</html>

Thanks a lot! My problem regarding the checking of checked box one by one has been solved — Jae Eun, Sep 08 '15 at 19:30
But there's still a problem about the button there should only be one button that will be shown. Either I clicked the "All" or I checked one or more checkbox — Jae Eun, Sep 08 '15 at 19:32
I figured it out. I remove the second button and my problem's solve thanks a lot. — Jae Eun, Sep 08 '15 at 19:43

Hide button when no checkbox is checked and show button if Check All is clicked or one or more checkbox is clicked

2 Answers2