如何在jQuery中使用下拉列表连接动态芯片框

您单击复选框，在选择列表/下拉列表和反向上选择了相同的内容。您可以在选中选择列表和复选框上选择，只有一个时间选择。

<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
    <form>
    <h3>Select color</h3>
    <div id="checkboxes">
      <label for="red">
        <input type="checkbox" id="red" value="0" onclick="selColor(0);" >red</label>
      <label for="blue">
        <input type="checkbox" id="blue" value="1" onclick="selColor(1);" checked>blue</label>
      <label for="green">
        <input type="checkbox" id="green" value="2" onclick="selColor(2);" />green</label>
    </div>
    <div>
    <select name="selectColorList" id="selectList" onchange="selectChanged()">
    <option value="0">red</option>
    <option value="1" selected>blue</option>
    <option value="2">green</option>
    </select>
    </div>
    </form>
    <script>
        $(document).ready(function(){
            $("#checkboxes").
        }); 
    </script>
</body>
</html>

上述任何帮助？

工作代码：

$("input[name='checkbox']").change(function() {
  $("input[name='checkbox']").prop('checked', false);
  $("#selectList").val(this.value);
  $(this).prop('checked', true);
});
$("#selectList").change(function() {
  $("input[name='checkbox']").prop('checked', false);
  $("#s" + this.value).prop("checked", true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Select color - in jQuery</h3>
<div id="checkboxes">
  <label for="red">
				<input type="checkbox" name="checkbox" id="s0" value="0">RED</label>
  <label for="blue">
				<input type="checkbox" name="checkbox" id="s1" value="1" checked>BLUE</label>
  <label for="green">
				<input type="checkbox" name="checkbox" id="s2" value="2"/>GREEN</label>
</div>
</br>
<div>
  <select name="selectColorList" id="selectList">
			<option value="0" >RED</option>
			<option value="1" selected>BLUE</option>
			<option value="2" >GREEN</option>
			</select>
</div>

也许这也会帮助某人。

相关内容

最新更新

热门标签：