the example is working fine, but is that possible to make it alert $200,000 instead of 'value' ?

var checkboxes = $('input[name="price[]"]');

checkboxes.on("click", function() {
  var $checked = checkboxes.filter(":checked"),
    checkedValues = $checked.map(function() {
      return this.value;
    }).get();
  alert(checkedValues);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="searchFilter">
  <li><input type="checkbox" name="price[]" class="cb_price" value="1"> $200,000 to $299,999</li>
  <li><input type="checkbox" name="price[]" class="cb_price" value="3"> $300,000 to $399,999</li>
  <li><input type="checkbox" name="price[]" class="cb_price" value="5"> $400,000 to $499,999</li>
  <li><input type="checkbox" name="price[]" class="cb_price" value="8"> $500,000 </li>
</ul>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Change the line: return this.value; to return the innerText of parent element (instead of input's value).

Snippet:

var checkboxes = $('input[name="price[]"]');

checkboxes.on("click", function() {
  var $checked = checkboxes.filter(":checked"),
    checkedValues = $checked.map(function() {
      return this.parentElement.innerText;
    }).get();
  alert(checkedValues);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="searchFilter">
  <li><input type="checkbox" name="price[]" class="cb_price" value="1"> $200,000 to $299,999</li>
  <li><input type="checkbox" name="price[]" class="cb_price" value="3"> $300,000 to $399,999</li>
  <li><input type="checkbox" name="price[]" class="cb_price" value="5"> $400,000 to $499,999</li>
  <li><input type="checkbox" name="price[]" class="cb_price" value="8"> $500,000 </li>
</ul>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Using vanilla JS:

const checkboxes = [...document.querySelectorAll('input[name="price[]"]')];

for (const checkbox of checkboxes) {
  checkbox.addEventListener('change', function(event) {
    const checkedValues = checkboxes.filter(cb=>cb.checked).map(cb=>cb.parentElement.textContent);
    console.log(checkedValues);
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="searchFilter">
  <li><input type="checkbox" name="price[]" class="cb_price" value="1"> $200,000 to $299,999</li>
  <li><input type="checkbox" name="price[]" class="cb_price" value="3"> $300,000 to $399,999</li>
  <li><input type="checkbox" name="price[]" class="cb_price" value="5"> $400,000 to $499,999</li>
  <li><input type="checkbox" name="price[]" class="cb_price" value="8"> $500,000 </li>
</ul>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>