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.

1. 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.
2. 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

Answer 1

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>

Answer 2

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>