【发布时间】：2023-03-21 06:31:02
【问题描述】：
我在这里有一个代码，用于在我选中或取消选中复选框时隐藏和显示按钮。我制作了一个具有相同等效项的两个按钮。
- 如果一个或多个复选框被选中，第一个按钮将显示，当没有选中复选框时隐藏。但是一旦我取消选中一个复选框，即使还有一个复选框已被选中，按钮也会被隐藏。
- 如果All（表示Check All）被点击，第二个按钮将显示，如果None按钮将被隐藏。
那么问题来了：
- 当您选中一个复选框时，即使您选中了多个复选框，按钮也会显示该按钮仍然存在，但是一旦您取消选中一个复选框，即使仍然选中复选框，该按钮也会被隐藏。
- 另一种情况是，当您单击 全部 时，它会选中所有复选框，并且即使您未选中复选框，只要仍有选中的复选框，按钮就会保留，但一旦您选中了复选框出现另一个按钮，并且已经有两个按钮。
这是带有复选框的表单的代码：
<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 : ₱ <?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 : ₱ <?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 : ₱ <?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 : ₱ <?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 : ₱ <?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 : ₱ <?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 : ₱ <?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 : ₱ <?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>
这是 All 选中所有复选框的脚本：
<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();
输出应该是当我取消选中一个复选框时，如果仍然选中一个或多个复选框，则按钮将保留。另一个是如果我点击了 All 所有复选框将被选中，但如果我取消选中一个复选框，然后再次选中它 onl
【问题讨论】：
-
不知道这是一个
sql的问题。你有没有在 jquery 中尝试过类似This -
很抱歉，提交问题和标记时出错。但我在 javascript 中使用它
-
由于 PHP 对这个问题没有影响，你能给我们 PHP 生成的 HTML 而不是 PHP 吗？也许删除 PHP 标记？
-
你有没有想过有一个全局变量来计算有多少复选框被选中？当一个复选框被选中时，向该变量添加一个，当一个复选框未被选中时，减去一个。如果按下全部选中，则将该变量设置为复选框的总数。如果第二次按下检查所有（取消检查所有），将其设置为 0。并且，要知道要显示哪些按钮，您只需要比较该变量的值。我说清楚了吗？
标签： javascript jquery forms checkbox