Question

我有多个组，每个组都包含一个复选框和一个下拉列表组合在一起，当特定组的下拉列表更改时，复选框也将自动设置为选中。

<div class="form-group">
        <div class="input-group col-md-12">
          <span class="input-group-addon">
            <input type="checkbox" name="filter[]" value="1">
          </span>
            <select class="dateselectpicker form-control"id="filter"title="Filter">
                <option>a</option>
                <option>b</option>
            </select>
        </div>
    </div>  

<div class="form-group">
            <div class="input-group col-md-12">
              <span class="input-group-addon">
                <input type="checkbox" name="filter[]" value="2">
              </span>
                <select class="dateselectpicker form-control"id="filter1"title="Filter">
                    <option>a</option>
                    <option>b</option>
                </select>
            </div>
        </div>

例如，当我选择第一个过滤器时，第一个过滤器的复选框将设置为选中。仅当下拉列表发生变化时。我怎么能这样做？

更新：应用selectpicker时无效。

Answer 1

你可以在jquery中使用change事件监听器来完成它，就像这样

$( "select" ).change(function() {
 $(this).prev(".input-group-addon").find(":checkbox").prop("checked",true);
});

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="form-group">
    <div class="input-group col-md-12">
      <span class="input-group-addon">
            <input type="checkbox" name="filter[]" value="1">
          </span>
      <select class="dateselectpicker form-control" id="filter" title="Filter">
                <option>a</option>
                <option>b</option>
            </select>
    </div>
  </div>

  <div class="form-group">
    <div class="input-group col-md-12">
      <span class="input-group-addon">
                <input type="checkbox" name="filter[]" value="2">
              </span>
      <select class="dateselectpicker form-control" id="filter1" title="Filter">
                    <option>a</option>
                    <option>b</option>
                </select>
    </div>
  </div>

</body>

</html>

更改下拉列表时如何自动将复选框设置为true？

1 个答案: