如何仅在选中指定学科复选框时通过jQuery显示按钮

Got it, let's get this working for you. First, here's your existing dynamic PHP code formatted for clarity:

<?php 
if($stmt = $conn->prepare("SELECT classid, code, name, teacher, classroom, time, cost FROM classes ORDER BY classid")){ 
    // $stmt->bind_param("isssssd"); 
    $result = $stmt->execute(); 
    $stmt->bind_result($classid, $code, $name, $teacher, $classroom, $time, $cost); 
    $checked = ""; 
    while ($stmt->fetch()) { 
        $row = array(
            "classid"=>$classid, 
            "code"=>$code, 
            "name"=>$name, 
            "teacher"=>$teacher, 
            "classroom"=>$classroom, 
            "time"=>$time, 
            "cost"=>$cost
        ); 
        if(in_array($classid, $selectedclasses)){ 
            $checked = "checked"; 
        }else{ 
            $checked = ""; 
        } 
?> 
<div class="row col-md-12"> 
    <hr/> 
</div> 
<div class="row col-md-12" id="class_<?php echo $classid; ?>"> 
    <div class="col-md-4 col-lg-4 col-sm-6 col-sx-6"> 
        <input type="checkbox" id="classitem_<?php echo $classid; ?>" name="classitem_<?php echo $classid; ?>" class="classitem" value="<?php echo $classid; ?>" <?php echo $checked; ?> > 
        <?php echo $name; ?> 
    </div> 
    <div class="col-md-2 col-lg-2 col-sm-6 col-sx-6"> 
        <?php echo $teacher; ?> 
    </div> 
    <div class="col-md-2 col-lg-2 col-sm-6 col-sx-6"> 
        <?php echo $cost; ?> 
    </div> 
    <div id="mine" class="col-md-4 col-lg-4 col-sm-6 col-sx-6"> 
        <?php echo $time; ?> 
    </div> 
</div> 
<?php 
    } 
    $stmt->close(); 
} 
?>

Now let's add the functionality to show a button/text when any of these dynamic checkboxes are selected. Here's the step-by-step fix:

1. Add the Hidden Action Element #

Right after your PHP loop (outside of it), add the element you want to display when checkboxes are selected. We'll hide it by default:

<!-- Hidden initially; will show when checkboxes are selected -->
<div id="actionContainer" style="display: none; margin-top: 2rem;">
    <button type="button" class="btn btn-primary">Confirm Your Class Selection</button>
    <p class="mt-2">You've picked at least one class!</p>
</div>

2. Add the jQuery Logic #

Include this script (make sure jQuery is loaded in your page first—either via CDN or local file):

$(document).ready(function() {
    // Listen for changes on ALL .classitem checkboxes (even dynamically generated ones)
    $(document).on('change', '.classitem', function() {
        // Count how many checkboxes are currently checked
        const selectedCount = $('.classitem:checked').length;
        
        // Toggle visibility based on the count
        if (selectedCount > 0) {
            $('#actionContainer').fadeIn(); // Use fadeIn for smooth transition, or just show()
        } else {
            $('#actionContainer').fadeOut(); // Use fadeOut or hide() for instant change
        }
    });

    // Check initial state on page load (in case some checkboxes are pre-checked)
    const initialSelected = $('.classitem:checked').length;
    if (initialSelected > 0) {
        $('#actionContainer').show();
    }
});

Key Details to Note: #

• Event Delegation: Using $(document).on('change', '.classitem', ...) instead of $('.classitem').change(...) is critical here. Since your checkboxes are generated dynamically after the page loads, event delegation ensures the change event triggers for all new checkboxes too.
• Initial State Check: Your PHP code sets some checkboxes to checked by default. This initial check makes sure the action container shows up immediately if any classes are pre-selected.
• UI Polish: I used fadeIn()/fadeOut() for a smoother user experience, but you can swap them with show()/hide() if you prefer instant visibility changes.

That's all! Now your button/text will only appear when at least one class checkbox is selected, and disappear when all are unchecked.

内容的提问来源于stack exchange，提问作者Harshith Srinivas