JQuery查找复选框的值并根据值检查复选框答案

【问题标题】：JQuery find value of checkbox and check the checkbox based on valueJQuery查找复选框的值并根据值检查复选框
【发布时间】：2021-12-29 00:42:59
【问题描述】：

我有一组复选框。我需要根据复选框的文本值选中复选框。例如，如果我有三个带有文本“复选框 01”、“复选框 02”的复选框。和“复选框 03”。我有一个名为“全选”的复选框。我想遍历复选框数组，只检查包含单词“02”的项目。或“03”。

我不精通 JQuery，我继承了这个，但我对代码进行了尝试，这是我尝试过的：

$(".rightColumn .SelectAllGroups").on("click", function () {
    if (this.checked) {
        $(".GroupSelection input:checkbox").each(function (i) {
            //alert("Index of item" + i);
            if (this(i).val.contains("01.") || this(i).val.contains("02.") || this(i).val.contains("03.") ||
                this(i).val.contains("04.") || this(i).val.contains("05.") || this(i).val.contains("06.") || this(i).val.contains("07 .") ||
                this(i).val.contains("08.") || this(i).val.contains("09.") || this(i).val.contains("10.") || this(i).val.contains("11.")) {
                this(i).checked = i;
            }
        });
    } else {
        $(".GroupSelection input:checkbox").each(function () {
            this.checked = false;
        });
    }
});

仅供参考，值“07”。确实有空间，而其他人没有。当我运行它时，我收到错误“这不是一个函数”。文本框是通过代码创建的。这是一个文本框的结果

<input name="ctl00$ctl00$ctl00$mainBody$mainContent$main$newEpisodeForm$NewSnapshot$GroupSelection$groupTypeList$ctl01$groupList$ctl00$groupCheck" type="checkbox" id="mainBody_mainContent_main_newEpisodeForm_NewSnapshot_GroupSelection_groupTypeList_groupList_1_groupCheck_0" isoptionalgroup="true" value="ae37b870-e525-4cce-9315-1e8e4e253483">
<span id="mainBody_mainContent_main_newEpisodeForm_NewSnapshot_GroupSelection_groupTypeList_groupList_1_groupLabel_0">01. First Test</span>

谢谢。

【问题讨论】：

首先检查抛出的错误。您的方法中有非常明显的语法和实体问题。建议您也查看val() 文档以了解如何正确使用它

标签： jquery asp.net

【解决方案1】：

你宁愿使用indexOf()而不是使用contain();

在 var 中获取元素 $(this) 以确保使用正确的元素。

您还可以使用prevAll()（或最接近（），nextAll（），具体取决于您的项目）从单击的元素中获取元素。再次像这样，您一定要使用正确的元素。

我在下面评论了我的代码：

$(".rightColumn .SelectAllGroups").on("click", function () {
  // be sure to get select all input
  let SelectAllGroups = $(this);
  
  // we check if SelectAllGroups is checked
  if ($(SelectAllGroups).is(":checked")) {
    // get closest element with class and then find input checkbox inside
    $(SelectAllGroups).prevAll(".GroupSelection:first").find("input:checkbox").each(function (i) {
      // get checkbox and his val
      let SelectionCheckbox = $(this);
      let SelectionCheckboxVal = SelectionCheckbox.val();
      
      // check if value contain with indexOf
      if (SelectionCheckboxVal.indexOf("01.") != -1 || SelectionCheckboxVal.indexOf("02.") != -1 || SelectionCheckboxVal.indexOf("03 .") != -1 ||  SelectionCheckboxVal.indexOf("04.") != -1) {
        // set prop checked to true
        $(SelectionCheckbox).prop('checked', true);
      }
    });
  } else {
    $(SelectAllGroups).prevAll(".GroupSelection:first").find("input:checkbox").each(function () {
      $(this).prop('checked', false);
    });
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="rightColumn">
  <div class="GroupSelection">
    <input type="checkbox" value="01.jqefdqs"> 01.
    <input type="checkbox" value="jqefdqs02."> 02.
    <input type="checkbox" value="jqef03 .dqs"> 03 .
    <input type="checkbox" value="jqef04.dqs"> 04.
    <input type="checkbox" value="05.jqefdqs"> 05.
  </div>
  <input type="checkbox" class="SelectAllGroups"> Select all
</div>

【讨论】：

【解决方案2】：

因为每个复选框都有一个值数组，并且它们是唯一的，所以我将值放在一个数组中，然后根据数组中的值设置复选框选中属性。代码如下：

$(".rightColumn .SelectAllGroups").on("click", function (evt) {
    if (this.checked) {
        
        var initValues = ['ae37b870-e525-4cce-9315-1e8e4e253483',
            '89fcfdee-74df-4304-a343-5b7f46accbb2',
            '38a2cb37-67a3-44a3-bad3-56bd67dedd2e',
            'c5447ffa-f6d2-43bc-9344-07f70fdd1b22',
            '33651165-aa95-45f8-9aa1-63472291543e',
            'ba49da31-8a5a-4453-8186-e679c73f7329',
            'a4ec8b3a-251b-4d8a-865e-8e276811b5ab',
            'cf768b29-68cd-453d-97a3-25cb0404298a',
            '81d1d54a-1618-4bca-a71b-1314733c7edb',
            '160fe561-1963-4b4c-9d61-c0d4a28b4acf',
            '28036de1-7fa9-4a90-8093-72f9a1c4400f']

        $.each(initValues, function (i, val) {

            $("input[value='" + val + "']").prop('checked', true);

        });
    } else {
        $(".GroupSelection input:checkbox").each(function () {
            this.checked = false;
        });
    }
});

由于这些值是唯一的，因为它们是 GUID，所以这可以选择我需要的复选框。

【讨论】：