时间戳

首页 > 解决方案 > 如何确定在文档加载时选择了哪个收音机？

javascript - 如何确定在文档加载时选择了哪个收音机？

问题描述

我目前有以下代码：

<div class="grid-x">
  <div class="cell small-4">
    <label>Product Type:</label>
  </div>
          
  <div class="cell small-4">
    <label style="text-align:center;" for="id_product_type_0">
      Monolithic Zirconia
      <input type="radio" name="product_type" value="BarZero Monolithic Zirconia" id="id_product_type_0" required="">
    </label>
  </div>
  <div class="cell small-4">
    <label style="text-align:center;" for="id_product_type_1">
      Lifetime Provisional
      <input type="radio" name="product_type" value="BarZero Lifetime Provisional" id="id_product_type_1" required="">
    </label>
  </div>
</div>

$("input[type=radio][name=product_type]").change(function() {
  if (this.value == 'BarZero Monolithic Zirconia') {
      $("#bar_type_option").css('display', 'none');
      $('input[name="bar_type_options"]').prop('checked', false);
      $('input[name="bar_type_options"]').prop("required", false);
      $("#barzero_zirconia_option").css('display', 'flex');
      $('input[name="barzero_zirconia_options"]').prop("required", true);
      $("#intaglio").css('display', 'flex');
      $('input[name="intaglio"]').prop("required", true);
  }
  else if (this.value == 'BarZero Lifetime Provisional') {
      $("#barzero_zirconia_option").css('display', 'none');
      $('input[name="barzero_zirconia_options"]').prop('checked', false);
      $('input[name="barzero_zirconia_options"]').prop("required", false);
      $("#intaglio").css('display', 'none');
      $('input[name="intaglio"]').prop('checked', false);
      $('input[name="intaglio"]').prop("required", false);
      $("#bar_type_option").css('display', 'flex');
      $('input[name="bar_type_options"]').prop("required", true);
  }
});

此代码获取用户的答案，并在他们做出选择或更改选择时显示额外的相关空白。遗憾的是，如果用户在提交表单并刷新页面时抛出错误，则此选择不会保持不变。如果使用以下代码选择了收音机，我目前正试图通过在页面加载时检查代码来解决这个问题：

$( document ).ready(function() {
  alert($('input[type=radio][name=product_type]').value);
  if ($('input[type=radio][name=product_type]').value == 'BarZero Monolithic Zirconia') {
    $("#bar_type_option").css('display', 'none');
    $('input[name="bar_type_options"]').prop('checked', false);
    $('input[name="bar_type_options"]').prop("required", false);
    $("#barzero_zirconia_option").css('display', 'flex');
    $('input[name="barzero_zirconia_options"]').prop("required", true);
    $("#intaglio").css('display', 'flex');
    $('input[name="intaglio"]').prop("required", true);
  }
  else if ($('input[type=radio][name=product_type]').value == 'BarZero Lifetime Provisional') {
    $("#barzero_zirconia_option").css('display', 'none');
    $('input[name="barzero_zirconia_options"]').prop('checked', false);
    $('input[name="barzero_zirconia_options"]').prop("required", false);
    $("#intaglio").css('display', 'none');
    $('input[name="intaglio"]').prop('checked', false);
    $('input[name="intaglio"]').prop("required", false);
    $("#bar_type_option").css('display', 'flex');
    $('input[name="bar_type_options"]').prop("required", true);
  }
});

但它似乎没有运行那里的警报来测试无线电输入的值，但它总是显示为未定义。

标签： javascripthtmlforms

解决方案

$(...)返回JQuery哪个是 jquery 对象。.value不是 JQuery 属性，它是所选元素的 vanilla js 属性。要获取（特别是）输入的值，您需要使用.val()jquery 的方法，而其他非输入可以使用该.text()方法。此外，由于您的表单可能只有一个带有名称的输入，因此您的选择器即使是正确的，也可以修剪为[name="product_type"].

这是你的代码：

$( document ).ready(function() {
  alert($('input[type=radio][name=product_type]').value); // undefined 
  alert($('input[type=radio][name=product_type]').val()); // ...

  // can be cut down to 
  alert($('[name="product_type"]:checked').val()); // ...

  if ($('[name="product_type"]:checked').val() == 'BarZero Monolithic Zirconia') {
    // ...
  }
  else if ($('[name="product_type"]:checked').val() == 'BarZero Lifetime Provisional') {
    // ...
  }
});

推荐阅读