На основе текста проверьте предыдущий флажок

Question

У меня есть набор флажков в диалоговом окне. При нажатии кнопки появляется это диалоговое окно. За этими флажками следуют теги привязки с некоторым текстом. Эти флажки соответствуют некоторым упорядоченным и неупорядоченным спискам.

Есть два случая в этом вопросе на флажках.

1. Если щелкнуть родителя, также будут отмечены соответствующие дочерние флажки.
2. Пользователь может также выбрать отдельных детей.

Здесь флажки, которые являются родителями, имеют свой собственный идентификатор. Но у детей нет идентификатора. Если он также имеет один идентификатор для всех дочерних элементов в иерархии.

Мне нужно в основном хранить флажки, которые отмечены в localStorage, так что, когда страница перезагружается, я могу получить состояние флажков, которые были проверены ранее.

Первый случай выше и работает отлично, но во втором случае я не могу получить предыдущее состояние отдельных флажков. Я попытался отправить текст после флажка, который был установлен в localStorage, а затем на загрузке страницы сравнивал каждый текст с сохраненными значениями. В случае совпадений проверяется атрибут предыдущего элемента текста. Это логика, которую я применил. Но он работает неправильно.

Это мой код

function display(){ 
//some code to display dialog box where the checkboxes along with anchor tags come into picture 

    var vals[]; 
    $("input[type=checkbox").each(function(){ 
     vals.push($(this).next("a").text()); 
    }); 
//some code which brings in localStorage and the existing data in the dialog 

код продолжается далее, которые в конечном счете принимает все параметры в и проверяет наличие следующих условий.

if (z[x]==hname[k]){ 
    alert("Matched"); 
    $('a[text="'+hname[k]+'"}').prev().attr("checked",true); 
} 

здесь г [х] мои предыдущие значения, сохраненные в LocalStorage и hname [к] является все значения в диалоговом окне.

Теперь моя проблема заключается в этой строке.

$('a[text="'+hname[k]+'"]').prev().attr("checked",true); 

Я пытаюсь проверить элемент, предшествующий тексту. Но это не сработает.

Мой HTML код ::

<ul class="test_ex"> 
    <li> 
     <input type="checkbox" id="chckBox" class="parent" /> <a class="ref">Fruits</a> 

     <ul class="example"> 
      <li> 
       <input type="checkbox" id="chckBox" class="child" /> <a class="ref"> Apple </a> 

      </li> 
      <li> 
       <input type="checkbox" id="chckBox" class="child" /> <a class="ref"> Orange </a> 

      </li> 
     </ul> 
     <ul class="test_ex_sample"> 
      <li> 
       <input type="checkbox" id="chckBox" class="parent" /> <a class="ref">Birds</a> 

       <ul class="example"> 
        <li> 
         <input type="checkbox" id="chckBox" class="child" /> <a class="ref"> Peacock </a> 

        </li> 
        <li> 
         <input type="checkbox" id="chckBox" class="child" /> <a class="ref">Parrot </a> 

        </li> 
       </ul> 
       <ul class="example"> 
        <li> 
         <input type="checkbox" id="chckBox" class="parent" /> <a class="ref"> Food </a> 

         <ul class="example"> 
          <li> 
           <input type="checkbox" id="chckBox" class="child" /> <a class="ref">Bread </a> 

          </li> 
         </ul> 
        </li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
</ul> 
<input type="button" id="testB" value="OK" /> 

Answer 1

Я предпочел бы использовать filter функцию:

$("a").filter(function (i, e) { 
    return 'Birds' === e.innerText.trim(); 
}).prev().attr("checked", true); 

проверяет флажок рядом с якорем, содержащего "Птицы" успешно.

Answer 2

Это одна из возможных решений:

HTML:

<ul class="test_ex"> 
    <li> 
     <input type="checkbox" class="parent" /> 
     <a class="ref">Fruits</a> 
     <ul class="example"> 
      <li> 
       <input type="checkbox" class="child" /> 
       <a class="ref"> Apple </a> 
      </li> 
      <li> 
       <input type="checkbox" class="child" /> 
       <a class="ref"> Orange </a> 
      </li> 
     </ul> 
     <ul class="test_ex_sample"> 
      <li> 
       <input type="checkbox" class="parent" /> <a class="ref">Birds</a> 

       <ul class="example"> 
        <li> 
         <input type="checkbox" class="child" /> <a class="ref"> Peacock </a> 

        </li> 
        <li> 
         <input type="checkbox" class="child" /> <a class="ref">Parrot </a> 

        </li> 
       </ul> 
       <ul class="example"> 
        <li> 
         <input type="checkbox" class="parent" /> <a class="ref"> Food </a> 

         <ul class="example"> 
          <li> 
           <input type="checkbox" class="child" /> <a class="ref">Bread </a> 

          </li> 
         </ul> 
        </li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
</ul> 
<input type="button" id="testB" value="OK" /> 

JQuery:

$("input:checkbox").click(function(){ 
    $(this).siblings("ul") 
      .find("input[type=checkbox]") 
      .prop("checked",this.checked); 
}); 

$("#testB").click(function(){ 
    var checkedValues = 
     $('input:checkbox:checked').map(function() { 
      return $(this).next().text(); //or html() instead of text() 
     }).get(); 
    alert(checkedValues); 
}); 

Проверить эту ссылку jsfiddle, чтобы увидеть рабочий пример.

Надеюсь, это полезно!