javascript - 如何验证表单 Either 或 OR 中的单选按钮字段？

Question

我在网页上还有一个带有其他字段的单选表单元素，单选表单字段有两种类型，一种是蔬菜，另一种是肉。我想像这样选择“如果他们选择肉类，他们必须选择蔬菜，但如果他们只选择蔬菜，他们不必选择肉类”，这是这些 radio 字段的屏幕截图 http://prntscr.com/nhu6ao

jQuery('.radio').change(function() {
  jQuery(this).parent().removeClass('error');
  jQuery(this).parent().parent().removeClass('error');
  if (jQuery(this).hasClass('box-input')) {
    jQuery('#preseason-error').slideUp("slow");
    jQuery('#preseason-title').css("color", "#444");
    jQuery('.boxes-select').removeClass('error');
  }
})

结果将是:如果他们选择肉类，则必须选择蔬菜，但如果他们只选择蔬菜，则不必选择肉类

Answer 1

瞧!

我已经为你准备了一个简单的例子。在我们开始之前，我想指出两件事。为每个表单元素创建一个事件监听器是非常低效的，就像您通过调用 .on('.radio') 所做的那样。此处的良好做法是在表单(或任何其他包装元素 - 甚至 body )上添加事件监听器，而不是使用 event.target 作为对用户刚刚单击的表单元素的引用.

另一件事是，从用户体验的 Angular 来看，我建议将肉类菜肴移至蔬菜之上，因为如果蔬菜以某种方式依赖于肉类，则将其显示为首选是没有意义的。

带有工作示例的 JSfiddle:https://jsfiddle.net/mkbctrlll/7209ayr3/45/

const $meals = $('#meal-options')

$meals.on('change', function(event) {
    if(event.target.name === 'meat') {
    console.log('Meat selected!')
    $('input[name="veggie"]').attr('required', 'true')
  }
})

<form id="meal-options">
  <h2>
    Meat options
  </h2>

  <label for="radio-1">
    <input id="radio-1" name="meat" type="radio">
    Meat 1
  </label>

  <label for="radio-2">
    <input id="radio-2" name="meat" type="radio">
    Meat 2
  </label>

  <h2>
    Veggie options
  </h2>

  <label for="radio-3">
    <input id="radio-3" name="veggie" type="radio">
    veggie 1
  </label>

  <label for="radio-4">
    <input id="radio-4" name="veggie" type="radio">
    veggie 2
  </label>

  <label for="radio-5">
    <input id="radio-5" name="veggie" type="radio">
    veggie 3
  </label>

  <input type="submit">
</form>