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