我有一个这样的下拉列表:
<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 代码是什么,显示包含下拉列表中项目名称的警报和已选中的复选框?
最佳答案
需要说明的是,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
显示信息.
关于javascript - 如果单击按钮,将选中哪个下拉项和复选框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46755973/