基于两个单选按钮的输入框显隐控制需求实现及代码调试

Hey there! Let's get your radio button toggle working correctly. Your current code has a few issues with event binding logic and selector handling, plus some minor HTML syntax problems. Here's the fixed version along with explanations of what was changed:

Corrected Full Code #

<div class="mdl-textfield check-modif mdl-js-textfield mdl-textfield--floating-label">
  <input class="mdl-textfield__input" type="text" id="check-modif">
  <label class="mdl-textfield__label" for="check-modif">Nama atau Kode barang</label>
</div>

<label class="mdl-radio radio-modif-name mdl-js-radio mdl-js-ripple-effect" for="update-name">
  <input type="radio" id="update-name" class="mdl-radio__button" name="options" value="1" checked>
  <span class="mdl-radio__label">Nama</span>
</label>

<label class="mdl-radio radio-modif-description mdl-js-radio mdl-js-ripple-effect" for="update-description">
  <input type="radio" id="update-description" class="mdl-radio__button" name="options" value="2">
  <span class="mdl-radio__label">Deskripsi</span>
</label>

<div class="mdl-textfield input-modif-name mdl-js-textfield" id="nama-container" name="nama">
  <input class="mdl-textfield__input" type="text" id="nama" name="nama">
  <label class="mdl-textfield__label" for="nama">Nama</label>
</div>

<div class="mdl-textfield input-modif-description mdl-js-textfield" id="deskripsi-container" name="deskripsi">
  <input class="mdl-textfield__input" type="text" id="deskripsi" name="deskripsi">
  <label class="mdl-textfield__label" for="deskripsi">Deskripsi</label>
</div>

<script>
$(function() {
  // Cache selectors for better performance
  const $namaContainer = $('#nama-container');
  const $deskripsiContainer = $('#deskripsi-container');
  const $radioButtons = $('input[name="options"]');

  // Set initial visibility based on default checked radio button
  if ($('#update-name').is(':checked')) {
    $namaContainer.hide();
    $deskripsiContainer.show();
  } else {
    $namaContainer.show();
    $deskripsiContainer.hide();
  }

  // Single event listener for all radio buttons in the group
  $radioButtons.on('change', function() {
    const selectedValue = $(this).val();
    
    if (selectedValue === '1') { // "Nama" radio selected
      $namaContainer.hide();
      $deskripsiContainer.fadeIn();
    } else if (selectedValue === '2') { // "Deskripsi" radio selected
      $deskripsiContainer.hide();
      $namaContainer.fadeIn();
    }
  });
});
</script>

Key Improvements & Fixes #

• Fixed HTML Syntax: Removed invalid </input> closing tags (input elements are self-closing in HTML, so these were causing unnecessary issues).
• Optimized Selectors: Added unique IDs (#nama-container and #deskripsi-container) to the input field containers, making element selection more reliable and readable. We also cached these selectors to avoid repeated DOM queries.
• Simplified Event Handling: Instead of binding separate click events to each radio button (which caused duplicate event bindings), we attached a single change event listener to all radio buttons in the options group. This is cleaner and more efficient.
• Correct Initial State: Set the initial visibility based on the default checked radio button (we marked "Nama" as checked by default, but you can adjust this to your preference).
• Clear Toggle Logic: The code now strictly follows your requirements:
  • When Nama is selected: Hides the nama input field, shows the deskripsi input field
  • When Deskripsi is selected: Hides the deskripsi input field, shows the nama input field

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