如何使用 Jquery 检查 li 复选框值？

Question

我有一个包含 2 个 li 项目的 ul，在用户选中复选框后，通过 saveBtn 按钮，我如何使用 jquery 检查哪个 li 被选中？

<ul id="DATE_29_CB_P" class= "new-select" >
<li class="d"><input type="checkbox" onclick="onlyOne(this)" name="check" >07:30-09:00 </li>
<li class="d"><input type="checkbox" onclick="onlyOne(this)" name="check" >07:30-09:00 </li>
</ul>



<button id="DATE_29_CB_P_SUBBMIT" class="save it" onclick="saveBtn(this)">Save it!</button>

//In the saveBtn function, I have the following codes.
$("#DATE_29_CB_P li").each(function() {
    
            if ($(this).find("input[type=checkbox]").prop(
                  ":checked")) {
                    console.log("Check box in Checked");
                } else {
                    console.log("Check box is not Checked");
                }
    });

它从来没有遇到过真实情况，我是 jquery 的新手，花了几个小时测试但无法让它工作。我需要知道选中了哪一个，还需要获取 html 文本。任何帮助将不胜感激！

Answer 1

是 checked 不是 :checked。

示例：

$('#DATE_29_CB_P_SUBBMIT').on('click', function() {
  $("#DATE_29_CB_P li").each(function(index, item) {
    if ($(this).find("input[type=checkbox]").prop("checked")) {
      console.log("Check box in Checked");
      console.log(index); //Index start with 0 so when it's zero, 1st check box is checked.
      console.log($(this).text());
    } else {
      console.log("Check box is not Checked");
    }
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="DATE_29_CB_P" class="new-select">
  <li class="d"><input type="checkbox" name="check">07:30-09:00 </li>
  <li class="d"><input type="checkbox" name="check">07:30-09:10 </li>
</ul>



<button id="DATE_29_CB_P_SUBBMIT" class="save it">Save it!</button>

或使用.is(":checked")):

$('#DATE_29_CB_P_SUBBMIT').on('click', function() {
  $("#DATE_29_CB_P li").each(function() {
    if ($(this).find("input[type=checkbox]").is(":checked")) {
      console.log("Check box in Checked");
    } else {
      console.log("Check box is not Checked");
    }
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="DATE_29_CB_P" class="new-select">
  <li class="d"><input type="checkbox" name="check">07:30-09:00 </li>
  <li class="d"><input type="checkbox" name="check">07:30-09:00 </li>
</ul>
<button id="DATE_29_CB_P_SUBBMIT" class="save it">Save it!</button>

如何使用 Jquery 检查 li 复选框值？

how can I use Jquery check li checkbox value?

jquery

css-selectors

html-lists