JavaScript/jQuery:Validate复选框&；下拉配对

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

我想验证一对的两个部分是否都被选中：

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

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

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

用于HTML的JSFIDLE：

一般来说，我花了几个小时在SO和Google上搜索，但找不到这样的例子。提前感谢您的帮助

<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>

车辆1
汽车
卡车
厢式货车
摩托车
车辆2
汽车
卡车
厢式货车
摩托车
车辆3
汽车
卡车
厢式货车
摩托车



提交数据

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

$（“#提交”）。单击（函数（e）{
var$invalid=$（'input:checkbox:checked+select:has（[value=”“]：selected'）；
if（$invalid.length）{
e、 预防默认值（）；
警报（'需要为“+$invalid.map（function（）选择一个值）{
返回此.previousSibling.nodeValue.trim（）；
}).get（）.join（'，'）；
返回；
}
//它是有效的，所以在这里做你的东西
})

车辆1
汽车
卡车
厢式货车
摩托车
车辆2
汽车
卡车
厢式货车
摩托车
车辆3
汽车
卡车
厢式货车
摩托车




提交数据

这样做，但首先将所有表单包装在一个div中，并在一个范围内包装文本，如

Vehicle 1

。然后尝试以下代码，单击RuntoTest

$（'button'）。在（'click'，function（）上{
var errors=validate耦合（$（'#myForm'）；
errors.length&&alert（errors.join（'\r\n'））；
如果（errors.length>0）{
返回false；
}
})
函数验证耦合（$el）{
var错误=[]；
$el.find（'div'）。每个（函数（）{
var$div=$（此），
$cbx=$div.find（'input:checkbox'），
$select=$div.find（'select'），
$span=$div.find（'span'）；
如果（$cbx.prop（'checked'）&&！$select.val（））{
错误.push（“请为“+$span.html（）选择一个值”）；
}else if（$select.val（）&&！$cbx.prop（'checked'））{
错误。推送（“请启用”+$span.html（））；
}
})
返回错误；
}

车辆1
汽车
卡车
厢式货车
摩托车
车辆2
汽车
卡车
厢式货车
摩托车
车辆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>

$（“输入，选择”）.change（函数（）{
如果（$（this.prop（“标记名”）=“选择”&&$（this.val（）！=“选择”）{
$（this）.sides（'input'）.prop（“选中”，true）
} 
else if（$（this.prop（“标记名”）=“选择”&&&$（this.val（）=“选择”）{
$（this）.this（'input'）.prop（'checked'，false）
}else if（$（this.prop（“标记名”）==“输入”）&&$（this.prop（“选中”）==true）{$（this.slides（'select'）。children（'option:eq（1）'）））.prop（“selected”，“selected”）；
}else if（$（this.prop（“标记名”）==“输入”）&&$（this.prop（“选中”）==false）{$（this.slides（'select'）。children（'option:eq（0）'）））.prop（“selected”，“selected”）；
}
})
车辆1
挑选
汽车
卡车
厢式货车
摩托车
车辆2
挑选
汽车
卡车
厢式货车
摩托车
车辆3
挑选
汽车
卡车
厢式货车
摩托车



提交数据

然后您可能必须在选择中添加一个空选项，否则默认情况下第一个选项将被标记为已选择？一个迟到的“谢谢！”给所有回答的人。我想了一个解决办法，但它太复杂了。