JavaScript/jQuery:验证复选框和下拉列表配对

JavaScript/jQuery: Validate Checkbox & Dropdown Pairing

本文关键字：下拉列表 复选框 验证 jQuery JavaScript      更新时间：2023-09-26

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

代码屏幕盖

我想验证是否选择了一对的两个部分：

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

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

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

JSFiddle for the HTML： 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>

您可以在选择中添加一个空选项，以便我们可以强制用户选择一个，然后在按钮的单击处理程序中，我们可以看到是否有任何选中的复选框，其中选择为空，例如 

$('#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>

这样做，但首先将所有表单包装在一个div 中，然后像Vehicle 1一样将文本包装在一个范围内。然后尝试以下代码，单击运行进行测试

$('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;
}
<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>

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

$("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>
相关文章：