텍스트 기반 이전 확인란 확인

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); 
} 

여기 z [x]는 이전의 localStorage에 저장된 값이고 hname [k]는 대화 상자의 모든 값입니다.

이제 내 문제는이 줄에 있습니다.

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

텍스트 앞의 요소를 확인하려고합니다. 그러나 그것은 효과가 없습니다. 성공적으로 "새"를 포함하는 앵커 근처

$("a").filter(function (i, e) { 
    return 'Birds' === e.innerText.trim(); 
}).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 기능을 사용할 수 있습니다.

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이 작동하는 예를 볼 수 있습니다.

희망이 있습니다. 유용합니다.