jquery復選框警報文本（但不是valueattr）-有解無憂

該示例作業正常，但是否可以使其警報 $200,000 而不是 '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>

uj5u.com熱心網友回復：

更改行：return this.value; 回傳innerText父元素的（而不是輸入的值）。

片段：

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>

uj5u.com熱心網友回復：

使用香草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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/341036.html

標籤：javascript html 查询

上一篇：我想從陣列制作HTML表格

下一篇：如何優化for回圈以適用于每個人？