Which dropdown item and checkbox are selected if button clicked?

Question

I have a dropdown list like this:

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

when a client select each one, some related check-boxes will appear. each item has got its own check-boxes. for example when they select mp3, check-boxes appear like this

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

And have a button at the end

<button class="ui blue basic button" id="search">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?

score 1 · Answer 1 · answered Oct 15 '17 at 14:40

Need to say, that SO is not a free code-writing service, so you have to provide what did you try, but for the first time it's OK, just notice that.

Here is what you're trying to achieve:

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

At first, I'm just getting the dropdown value via $("#product").val();. Then, I select all checkboxes via $("input[type='checkbox']"), then, I iterate through selected checkboxes via .each() and pushing name property of only checked checkboxes to checkedArr array. And finally I'm showing the info with simple alert.

score 0 · Accepted Answer · 2017-10-15T15:08:43.493

0

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

Which dropdown item and checkbox are selected if button clicked?

2 Answers2