jQuery多条件判断失效：表单输入框显示逻辑代码修改求助

Hey there! Let's sort out that conditional input issue you're facing. I totally get what you're aiming for—let's break this down with a clear, working solution.

First, let's start with a standard HTML structure that aligns with your requirements. I'll use radio buttons for the "provide/request" and "Sale/Rent" selections, and group the input fields so we can easily show/hide them:

<!-- Selection Controls -->
<div class="selection-controls">
  <label>
    <input type="radio" name="listing-type" value="provide" checked> Provide
  </label>
  <label>
    <input type="radio" name="listing-type" value="request"> Request
  </label>

  <label>
    <input type="radio" name="action-type" value="Sale" checked> Sale
  </label>
  <label>
    <input type="radio" name="action-type" value="Rent"> Rent
  </label>
</div>

<!-- Input Fields -->
<div class="input-group price-group">
  <label>Price: <input type="number" name="price"></label>
</div>
<div class="input-group fare-group">
  <label>Fare: <input type="number" name="fare"></label>
</div>
<div class="input-group minmax-price-group">
  <label>Min Price: <input type="number" name="min_price"></label>
  <label>Max Price: <input type="number" name="max_price"></label>
</div>
<div class="input-group minmax-fare-group">
  <label>Min Fare: <input type="number" name="min_fare"></label>
  <label>Max Fare: <input type="number" name="max_fare"></label>
</div>

Next, let's write the jQuery code that handles the conditional logic properly. The main issues people run into here are:

• Not listening for changes on both selection controls
• Forgetting to initialize the input visibility on page load
• Overcomplicating the conditional checks

Here's the cleaned-up, working jQuery:

$(document).ready(function() {
  // Hide all input groups by default
  $('.input-group').hide();

  // Define a reusable function to update input visibility
  function updateInputVisibility() {
    const selectedType = $('input[name="listing-type"]:checked').val();
    const selectedAction = $('input[name="action-type"]:checked').val();

    // Hide all groups first to reset state
    $('.input-group').hide();

    // Show the correct group based on selections
    if (selectedType === 'provide') {
      if (selectedAction === 'Sale') {
        $('.price-group').show();
      } else if (selectedAction === 'Rent') {
        $('.fare-group').show();
      }
    } else if (selectedType === 'request') {
      if (selectedAction === 'Sale') {
        $('.minmax-price-group').show();
      } else if (selectedAction === 'Rent') {
        $('.minmax-fare-group').show();
      }
    }
  }

  // Run the function on page load to set initial state
  updateInputVisibility();

  // Listen for changes on both selection radio groups
  $('input[name="listing-type"], input[name="action-type"]').on('change', updateInputVisibility);
});

Key Explanations: #

• Initial Hide: We start by hiding all input groups so only the correct one shows up based on the initial selections.
• Reusable Function: updateInputVisibility() handles all the conditional logic in one place—this makes it easy to call on page load and whenever a selection changes.
• Dual Event Listeners: We attach the change event to both radio button groups, so any change (whether switching between provide/request or Sale/Rent) triggers an update.
• Reset First: Before showing the correct group, we hide all groups to prevent multiple groups from staying visible if selections are switched quickly.

This should exactly match your requirements:

• Provide + Sale → Only price input shows
• Provide + Rent → Only fare input shows
• Request + Sale → min_price and max_price show
• Request + Rent → min_fare and max_fare show

Just adjust the name attributes and class names if your existing HTML uses different identifiers—this structure is easy to adapt to your specific form.

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