javascript - 如果单击按钮，将选中哪个下拉项和复选框？

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不是免费的代码编写服务，所以你必须提供你尝试过的东西，但是第一次没问题，注意一下。

这是您要实现的目标:

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() 遍历选定的复选框并插入name只有checked的属性(property)checkedArr 的复选框大批。最后我用简单的 alert 显示信息.