Question

我自学JavaScript / jQuery。我有三对要验证的复选框和下拉列表：

我想确认选择了一对的两个部分：

- 如果选中复选框，则还会从关联的下拉列表中选择一个值

- 或者，如果从下拉列表中选择了某个值，则必须选中相关的复选框

我不想在此过程中启用/禁用复选框或下拉列表。我希望允许用户检查/选择它们的内容，然后检查是否在提交时检查并选择给定对的两个部分。

HTML的JSFiddle：https://jsfiddle.net/6y6e0aod/5/

我在SO上花了几个小时并且谷歌搜索一般，但是找不到这样的例子。提前感谢您的帮助。

<div>
  <input type="checkbox">Vehicle 1
  <select>
    <option>Car</option>
    <option>Truck</option>
    <option>Van</option>
    <option>Motorcycle</option>
  </select>
</div>

<div>
  <input type="checkbox">Vehicle 2
  <select>
    <option>Car</option>
    <option>Truck</option>
    <option>Van</option>
    <option>Motorcycle</option>
  </select>
</div>

<div>
  <input type="checkbox">Vehicle 3
  <select>
    <option>Car</option>
    <option>Truck</option>
    <option>Van</option>
    <option>Motorcycle</option>
  </select>
</div>

<br /><br />
<button>submit data</button>

Answer 1

你可以在select中添加一个空选项，这样我们就可以强制用户选择一个，然后在按钮的click处理程序中我们可以看到是否有任何选中的复选框，其中select是空的，如

$('#submit').click(function(e) {
  var $invalid = $('input:checkbox:checked + select:has([value=""]:selected)');
  if ($invalid.length) {
    e.preventDefault();
    alert('Need to select a value for: ' + $invalid.map(function() {
      return this.previousSibling.nodeValue.trim();
    }).get().join(', '));
    return;
  }
  //it is valid so do your stuff here
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="checkbox">Vehicle 1
  <select>
    <option value=""></option>
    <option>Car</option>
    <option>Truck</option>
    <option>Van</option>
    <option>Motorcycle</option>
  </select>
</div>

<div>
  <input type="checkbox">Vehicle 2
  <select>
    <option value=""></option>
    <option>Car</option>
    <option>Truck</option>
    <option>Van</option>
    <option>Motorcycle</option>
  </select>
</div>

<div>
  <input type="checkbox">Vehicle 3
  <select>
    <option value=""></option>
    <option>Car</option>
    <option>Truck</option>
    <option>Van</option>
    <option>Motorcycle</option>
  </select>
</div>

<br />
<br />
<button id="submit">submit data</button>

Answer 2

这样做，但首先将所有表单包装在div中并在一个范围内包装Vehicle 1之类的文本。然后尝试以下代码，单击run to test

＆＃13;

$('button').on('click', function() {
  var errors = validateCouple($('#myForm'));
  errors.length && alert(errors.join('\r\n'));
  if (errors.length > 0) {
    return false;
  }
})

function validateCouple($el) {
  var errors = [];
  $el.find('div').each(function() {
    var $div = $(this),
      $cbx = $div.find('input:checkbox'),
      $select = $div.find('select'),
      $span = $div.find('span');

    if ($cbx.prop('checked') && !$select.val()) {
      errors.push("Please select a value for " + $span.html());
    } else if ($select.val() && !$cbx.prop('checked')) {
      errors.push("Please enable " + $span.html());
    }
  })
  return errors;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myForm">

  <div>
    <input type="checkbox" checked="checked"><span>Vehicle 1</span>
    <select>
      <option></option>
      <option>Car</option>
      <option>Truck</option>
      <option>Van</option>
      <option>Motorcycle</option>
    </select>
  </div>

  <div>
    <input type="checkbox"><span>Vehicle 2</span>
    <select>
      <option>Car</option>
      <option>Truck</option>
      <option>Van</option>
      <option>Motorcycle</option>
    </select>
  </div>

  <div>
    <input type="checkbox"><span>Vehicle 3</span>
    <select>
      <option>Car</option>
      <option>Truck</option>
      <option>Van</option>
      <option>Motorcycle</option>
    </select>
  </div>

  <br />
  <br />
  <button>submit data</button>
</div>

＆＃13;

Answer 3

此代码可以为您的方案提供帮助

$("input,select").change(function() {
    if($(this).prop("tagName") == "SELECT" && $(this).val() != "SELECT")     {
       $(this).siblings('input').prop("checked",true)
    } 
    else if($(this).prop("tagName") == "SELECT" && $(this).val() == "SELECT")     {
       $(this).siblings('input').prop("checked",false)
    } else if(($(this).prop("tagName") == "INPUT") && $(this).prop("checked") == true) {  $(this).siblings('select').children('option:eq(1)').prop("selected","selected");
    } else if(($(this).prop("tagName") == "INPUT") && $(this).prop("checked") == false) {        $(this).siblings('select').children('option:eq(0)').prop("selected","selected");
    }
})


<div>
  <input type="checkbox">Vehicle 1
  <select>
   <option>SELECT</option>
    <option>Car</option>
    <option>Truck</option>
    <option>Van</option>
    <option>Motorcycle</option>
  </select>
</div>

<div>
  <input type="checkbox">Vehicle 2
  <select>
     <option>SELECT</option>
    <option>Car</option>
    <option>Truck</option>
    <option>Van</option>
    <option>Motorcycle</option>
  </select>
</div>

<div>
  <input type="checkbox">Vehicle 3
  <select>
  <option>SELECT</option>
    <option>Car</option>
    <option>Truck</option>
    <option>Van</option>
    <option>Motorcycle</option>
  </select>
</div>

<br /><br />
<button>submit data</button>

</button>

JavaScript / jQuery：验证Checkbox＆amp;下拉配对

3 个答案: