如何在jQuery中将动态checbox与下拉列表连接起来

时间:2017-09-12 08:14:13

标签: jquery checkbox drop-down-menu

您单击复选框,在选择列表/下拉列表中选择相同并反向。 您选择选择列表并选中复选框,只选择一个时间选择。

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

上面的任何帮助??

1 个答案:

答案 0 :(得分:0)

工作代码:

&#13;
&#13;
$("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);
});
&#13;
<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>
&#13;
&#13;
&#13;

也许这对某些人也有帮助。