我这里有一个代码，用于在选中或取消选中复选框时隐藏和显示按钮。我用相同的等价物制作了两个按钮。
- 如果一个或多个复选框被选中，第一个按钮将显示，当没有复选框被选中时，第一个按钮将隐藏。但是，一旦我取消选中一个复选框，即使仍然有一个复选框已被选中，该按钮也会被隐藏。
- 如果点击了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();
输出应该是当我取消选中一个复选框时，如果一个或多个复选框仍然被选中，按钮将保留。另一种情况是，如果我单击全部，所有复选框都将被选中，但如果我取消选中一个复选框，然后再次选中它
最佳答案
试试这个，但是在你需要设置 jquery lib 之前，例如像这样
<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>
关于javascript - 未选中复选框时隐藏按钮，单击“全部选中”或单击一个或多个复选框时显示按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32463747/