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

【问题标题】：Which dropdown item and checkbox are selected if button clicked?如果单击按钮，会选择哪个下拉项和复选框？
【发布时间】：2018-03-27 03:04:30
【问题描述】：

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

<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 代码来检查按钮是否被点击，显示一个警报包含下拉列表中的项目名称和选中的复选框？

【问题讨论】：

标签： javascript jquery

【解决方案1】：

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

这是您想要实现的目标：

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}`)
}

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

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

【讨论】：

【解决方案2】：

You can see this solutionhttps://jsfiddle.net/dpdvmh8x/1/

阅读更多：

【讨论】：