I have an array of checkboxes. I need to check the boxes based on the text value for the checkbox. For examples if I have three checkboxes with the text "Checkbox 01.", "Checkbox 02." and "Checkbox 03." and I have a checkbox called "Select All". I want to iterate through the array of checkboxes and only check items that contain the word "02." or "03."

I'm not proficient in JQuery, I inherited this, but I took a stab at the code and here is what I tried:

$(".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;
        });
    }
});

Just an FYI, the value "07 ." does have a space whereas the others don't. When I run this I get the error "This is not a function". The textboxes are created via code. Here is the result of one textbox

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

Thanks.

CodePudding user response：

You rather use indexOf() instead of using contain();

Get element $(this) in a var to be sure to use the right element.

You can also get elements from the clicked element by using prevAll() (or closest(), nextAll() depending on your project). Like this again, you sure to use the right element to work with.

I commented my code below :

$(".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 >
  <div >
    <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" > Select all
</div>

CodePudding user response：

Since I had an array of values for each of the checkboxes, and they were unique, I put the values in an array and then set the checkbox checked property based on the value from the array. Here is the code:

$(".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;
        });
    }
});

Since the values were unique since they are GUID's, then this worked to pick up the checkboxes I need.