如何实现输入身高与单选框值匹配预设尺码表并输出结果

Hey there! I see you're just starting out with coding, and you're trying to build a tool that matches height + style selection to a clothing size. Let's fix up your current code and add that missing size-matching logic.

First, Let's Fix the Issues in Your Current Code #

Your existing code has a few small problems we need to address first:

• Duplicate id attributes: All your radio buttons have id="stylebox" — HTML requires unique IDs, so we'll fix that to make labels work correctly.
• Incorrect event handling: You're listening for keyup on radio buttons (which don't trigger keyup events!) and your total variable is hardcoding the string "heightstyle" instead of using actual input values.
• Unnecessary inline onClick: We can handle radio button changes cleanly with jQuery instead of mixing JS into your HTML.

Let's Build the Solution #

Here's the revised code with full size-matching logic, plus explanations for each part:

1. Updated HTML

<table>
  <tbody>
    <tr id="person_total">
      <td><input name="height" type="number" class="span1 height" maxlength="5" placeholder="Enter height (cm)"></td>
      <td>
        <input type="radio" id="style-s" name="stylebox" class="style" value="s" checked/>
        <label for="style-s">S</label>
        <input type="radio" id="style-n" name="stylebox" class="style" value="n"/>
        <label for="style-n">N</label>
        <input type="radio" id="style-b" name="stylebox" class="style" value="b"/>
        <label for="style-b">B</label>
      </td>
      <td><input name="total" type="text" class="span1 total" readonly placeholder="Matching size"></td>
    </tr>
  </tbody>
</table>

• Fixed unique IDs for radio buttons so labels properly link to their inputs.
• Removed inline onClick to keep JavaScript separate from your HTML structure.

2. Revised JavaScript with Size-Matching Logic

$(window).load(function(){
  // Create a reusable function to calculate the matching size
  function getMatchingSize(height, style) {
    // Replace these rules with your actual size chart guidelines!
    if (style === 's') {
      if (height <= 160) return 'XS';
      if (height <= 168) return 'S';
      if (height <= 175) return 'M';
      return 'L';
    } else if (style === 'n') {
      if (height <= 165) return 'S';
      if (height <= 173) return 'M';
      if (height <= 180) return 'L';
      return 'XL';
    } else if (style === 'b') {
      if (height <= 170) return 'M';
      if (height <= 178) return 'L';
      if (height <= 186) return 'XL';
      return 'XXL';
    }
    return ''; // Fallback if style is invalid
  }

  // Function to update the size display whenever inputs change
  function updateSize() {
    var row = $('#person_total');
    var height = parseInt(row.find('.height').val(), 10);
    var selectedStyle = row.find('.style:checked').val();

    // Only calculate if height is a valid positive number
    if (!isNaN(height) && height > 0) {
      var matchingSize = getMatchingSize(height, selectedStyle);
      row.find('.total').val(matchingSize);
    } else {
      row.find('.total').val(''); // Clear the field if height is invalid
    }
  }

  // Listen for changes to the height input and radio buttons
  $('.height').on('input keyup', updateSize);
  $('.style').on('change', updateSize);
});

Key Improvements Explained #

• Separate size calculation function: getMatchingSize() makes it super easy to adjust your size chart later — just edit the conditions inside this function to match your exact sizing rules (like your example of 164cm + Style S = A).
• Proper event listening: We now listen for input/keyup on the height field (so it updates as you type) and change on the radio buttons (triggers when you select a different style).
• Input validation: We check if the height is a valid positive number before calculating, so we don't show weird results for empty or invalid inputs.

How to Customize the Size Rules #

To match your exact size chart, modify the conditions in getMatchingSize(). For example, if your rule is "164cm + Style S = A", you'd adjust the 's' section to:

if (style === 's') {
  if (height <= 163) return '...';
  if (height === 164) return 'A';
  // Add more conditions for other height ranges here
}

If your size chart gets complex, you could even store rules in an object for easier maintenance:

const sizeChart = {
  s: [
    { maxHeight: 163, size: '...' },
    { maxHeight: 164, size: 'A' },
    { maxHeight: Infinity, size: '...' }
  ],
  // Add rules for 'n' and 'b' styles here
};

Then loop through the array to find the matching size — this keeps your code clean as your sizing rules grow.

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