Question

我有一个这样的下拉列表：

<select name="product" id="product" class="ui fluid search dropdown" >
    <option value="mp3">MP3 player</option>
    <option value="camera">Camera</option>
    <option value="mobile">Mobile</option>
    <option value="dvd">DVD player</option>
</select>

当客户选择每一个时，会出现一些相关的复选框。每个项目都有自己的复选框。例如，当他们选择mp3时，复选框就像这样

<div class="ui segment" id="mp3">
    <div class="ui toggle checkbox">
        <input type="checkbox" name="public">
        <label>Price</label>
    </div>
    <div class="ui toggle checkbox">
        <input type="checkbox" name="public">
        <label>Weight</label>
    </div>
    <div class="ui toggle checkbox">
        <input type="checkbox" name="public">
        <label>Storage</label>
    </div>
</div>

最后有一个按钮

<button class="ui blue basic button" id="search">Search</button>

检查按钮是否被单击的jquery代码是什么，显示警告包含下拉列表中的项目名称以及选中的复选框？

Answer 1

需要说的是，SO不是免费的代码编写服务，所以你必须提供你尝试过的东西，但是第一次没关系，只需注意这一点。

以下是您尝试实现的目标：

＆＃13;

function whichIsSelected() {
  var checkedArr = [];
  var dtopdownVal = $("#product").val();
  $("input[type='checkbox']").each(function() {
    if($(this).prop("checked")) {
      checkedArr.push($(this).prop("name"));
    }
  });
  alert(`Selected item from dropdown: ${dtopdownVal}. Checked checkboxes: ${checkedArr}`)
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="product" id="product" class="ui fluid search dropdown" >
<option value="mp3">MP3 player</option>
<option value="camera">Camera</option>
<option value="mobile">Mobile</option>
<option value="dvd">DVD player</option>
</select>

<div class="ui segment" id="mp3">
<div class="ui toggle checkbox">
<input type="checkbox" name="Price">
<label>Price</label>
</div>
<div class="ui toggle checkbox">
<input type="checkbox" name="Weight">
<label>Weight</label>
</div>
<div class="ui toggle checkbox">
<input type="checkbox" name="Storage">
<label>Storage</label>
</div>
</div>

<button class="ui blue basic button" id="search" onclick="whichIsSelected()">Search</button>
<!-- what is the jquery code to check if the button is clicked, show an alert contains the name of the item in dropdown and check-boxes which are checked? -->

＆＃13;

首先，我只是通过$("#product").val();获取下拉值。然后，我通过$("input[type='checkbox']")选中所有复选框，然后，我通过.each()遍历选中的复选框，并将name复选框的checked属性推送到checkedArr数组。最后，我用简单的alert显示信息。

Answer 2

You can see this solution https://jsfiddle.net/dpdvmh8x/1/

阅读更多：

如果单击按钮，则选择哪个下拉项和复选框？

2 个答案: