Question

我在这里有一个关于在我选中或取消选中复选框时隐藏和显示按钮的代码。我做了两个相同的等效按钮。

第一个按钮将显示是否选中了一个或多个复选框，并在未选中复选框时隐藏。但是，一旦我取消选中一个复选框，即使还有一个已经选中的复选框，该按钮也会被隐藏。
第二个按钮将显示全部是否单击全部检查，如果无，则隐藏按钮。

所以这就是问题所在：

当您选中一个复选框时，即使您选中了多个复选框，该按钮仍会显示按钮仍然存在但是一旦您取消选中复选框，即使仍然选中了复选框，该按钮也会被隐藏。
另一个是当您点击全部时，它会选中所有复选框，只要您选中复选框，即使您取消选中复选框，也会显示一个按钮，按钮将会保留但是一旦选中了复选框另一个按钮出现，两个按钮就在那里。

以下是带有复选框的表单代码：

<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>

这是我的按钮脚本：

此脚本用于逐个检查复选框：

<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>

以下是全部全部选中复选框的脚本：

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

输出应该是我取消选中复选框时，如果仍然选中一个或多个复选框，则按钮将保留。另一个是如果我点击全部全部复选框将被选中但如果我取消选中一个复选框然后再次检查它

Answer 1

您的问题很难理解，但我想以下代码可以帮助您。

<!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>

未选中复选框时隐藏按钮，如果单击全部检查或单击一个或多个复选框，则显示按钮

1 个答案: