页面加载时默认选中产品重量选项复选框失效问题求助

It’s frustrating when a previously working feature breaks after design tweaks—let’s break down the most likely issues and fixes for your radio button selection problem:

1. Verify Targeted Elements Still Exist (and Have Correct IDs) #

Design changes often involve modifying DOM elements or their IDs. First, confirm these critical details using your browser’s DevTools (F12):

• The element with ID product-nav is still present in your HTML. If it was removed or renamed, $( '#product-nav' ).length will return 0, so your loop won’t run at all.
• The radio button with ID price_1 exists. Inspect the page to check if this element is present and its ID matches exactly (e.g., no typos like price-1 instead of price_1).
• The element prices_1 (where you’re updating the price display) also exists with the correct ID.

2. Simplify the Loop Logic (If Radio Buttons Are in a Single Group) #

Your current loop tries to check all price_n radio buttons. If these buttons are part of the same radio group (sharing the same name attribute), only the last one checked will stay selected. Since you want the first option selected by default, you don’t need a loop at all—target the first button directly:

$(document).ready(function() {
  // Select the first weight option
  $('#price_1').prop('checked', true);
  
  // Update the price display (keep your PHP logic intact)
  var pric = $('#price_1').val();
  $('#prices_1').innerHTML = "<?php echo ...";
});

This avoids unnecessary looping and ensures only the intended button is selected.

3. Check for Dynamic Content Loading #

If your product options are now loaded dynamically (e.g., via AJAX, lazy loading, or a framework component), document.ready might fire before the radio buttons exist in the DOM. Fixes for this include:

• Moving your script to the end of the HTML body (right before </body>) so it runs after all static elements are rendered.
• Using a mutation observer to detect when the radio buttons are added to the DOM.
• If using a frontend framework (React/Vue/Svelte), use the framework’s lifecycle hooks to run the code after the component mounts.

4. Resolve jQuery Conflicts #

If new scripts were added to the page, there might be a conflict with the $ alias for jQuery. Test this by replacing $ with jQuery:

jQuery(document).ready(function() {
  jQuery('#price_1').prop('checked', true);
  // Rest of your code...
});

If this works, wrap your code in a no-conflict wrapper to keep using $:

jQuery.noConflict();
(function($) {
  $(document).ready(function() {
    $('#price_1').prop('checked', true);
    // Rest of your code...
  });
})(jQuery);

5. Debug with DevTools Console #

Run these commands in your browser’s console to narrow down the issue:

• $('#price_1').prop('checked', true); Does this manually select the radio button?
• $('#product-nav').length If this returns 0, the product-nav element is missing.
• $('#price_1').length If this returns 0, the radio button’s ID is incorrect.

These quick tests will help you pinpoint exactly where the problem lies.

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