求助：jQuery中复选框控制Div显示隐藏失效问题

Hey there! Let's break down how to fix this image checkbox toggle issue step by step — since you're new to jQuery/JS, I'll keep things clear and straightforward.

First, Fix the HTML Structure #

I noticed your <img> tag has duplicate class attributes, which can cause unexpected behavior. Let's clean that up first:

<div class="col-md-3">
  <label class="btn btn-primary">
    <img class="retina img-thumbnail img-check" src="{{asset('app/img/logo.png')}}" alt="Checkbox Image">
    <input type="checkbox" name="chk1" id="hemming" value="val1" class="hidden" autocomplete="off">
  </label>
</div>

<!-- Add your target div here (replace with your actual content) -->
<div id="targetContent" style="display: none;">
  This is the content you want to show/hide!
</div>

jQuery Logic to Toggle Visibility #

The core issue is likely that your code isn't properly listening for the checkbox state change, or isn't correctly targeting the div to toggle. Here's a reliable solution:

// Wait for the entire page to load before running our code
$(document).ready(function() {
  // Listen for when the checkbox's state changes
  $('#hemming').on('change', function() {
    // Check if the checkbox is checked
    if ($(this).is(':checked')) {
      // Show the target div
      $('#targetContent').show();
    } else {
      // Hide the target div
      $('#targetContent').hide();
    }
  });

  // Optional: Initialize the div's state if the checkbox is pre-checked on page load
  if ($('#hemming').is(':checked')) {
    $('#targetContent').show();
  }
});

Quick Explanation for Beginners #

• $(document).ready(): Makes sure our code only runs after all HTML elements are loaded (critical for targeting elements correctly).
• $('#hemming').on('change'): Triggers every time the checkbox is checked or unchecked.
• $(this).is(':checked'): Checks the current state of the checkbox that was clicked.
• show()/hide(): Simple methods to toggle the visibility of your target div.

Bonus: Reusable Code for Multiple Checkboxes #

If you have multiple image checkboxes controlling different divs, use data attributes to make the code scalable:

<!-- Checkbox 1 -->
<div class="col-md-3">
  <label class="btn btn-primary">
    <img class="retina img-thumbnail img-check" src="{{asset('app/img/logo1.png')}}" alt="Checkbox 1">
    <input type="checkbox" name="chk1" class="toggle-checkbox hidden" data-target="#content1" autocomplete="off">
  </label>
</div>

<!-- Checkbox 2 -->
<div class="col-md-3">
  <label class="btn btn-primary">
    <img class="retina img-thumbnail img-check" src="{{asset('app/img/logo2.png')}}" alt="Checkbox 2">
    <input type="checkbox" name="chk2" class="toggle-checkbox hidden" data-target="#content2" autocomplete="off">
  </label>
</div>

<!-- Target Divs -->
<div id="content1" style="display: none;">Content for Checkbox 1</div>
<div id="content2" style="display: none;">Content for Checkbox 2</div>

$(document).ready(function() {
  // Handle all toggle checkboxes with one event listener
  $('.toggle-checkbox').on('change', function() {
    const targetDiv = $(this).data('target'); // Get the div to target from the data attribute
    $(targetDiv).toggle($(this).is(':checked')); // Toggle visibility based on checkbox state
  });

  // Initialize states for pre-checked checkboxes
  $('.toggle-checkbox').each(function() {
    $($(this).data('target')).toggle($(this).is(':checked'));
  });
});

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