在子菜單中查找已選中的複選框

這是菜單有三個級別而且我想在第三級找到選中的複選框。我爲複選框選中了複選框功能但是Does not Work Fine.how我可以這麼做嗎？在子菜單中查找已選中的複選框

<div class="tree"> <ul> 
        <li class='Root'> 
         <input type='checkbox'/><a href='#' name="Ar">First part</a> 
         <ul> 
          <li class='Root'> 
           <a id='6' href='#'><input type='checkbox' />Second part</a> 
           <ul class='SubRoot' > 
            <li><input id='1' type='checkbox' />Third part</li> 
            <li><input id='2' type='checkbox' />Third part</li> 
           </ul> 
           </li> 
          <li class='Root'><a id='7' href='#'><input type='checkbox' />Second part</a> 
           <ul class='SubRoot'> 
            <li><input id='1' type='checkbox' />Third part</li> 
           </ul> 
          </li> 
         </ul> 
        </li> 
        <li class='Root'> 
         <input type='checkbox'/><a href='#' name="Ar">First part</a> 
         <ul> 
          <li class='Root'> 
           <a id='6' href='#'><input type='checkbox' />Second part</a> 
           <ul class='SubRoot' > 
            <li><input id='1' type='checkbox' />Third part</li> 
           </ul> 
           </li> 
         </ul> 
        </li> 
    </ul> </div 

      var listPart = []; 
      $('.tree >ul>li input:checked').each(function() { 
       var A1 = this.id; 
       listPart.push(A1); 
      });

來源

2015-11-04 Vahid Akbari

你需要解釋一下你想要更好一點。不幸的是，你的描述不太可讀。 –

立即檢查... –

您是否想要檢查父母複選框？ – Apeiron

您可以使用此選擇：

$(".SubRoot input[type='checkbox']:checked");

Example JSFiddle

來源

2015-11-04 16:18:37

有一些問題，請閱讀代碼中的註釋理解它們。

function check() { 
 
    var listPart = []; 
 
    var listSec = []; 
 
    var listTA = []; 
 
    $('.tree >ul>li input:checked').each(function() { 
 
    var A1 = this.id; 
 
    listPart.push(A1); 
 

 
    var Sec = $(this).closest('ul').parent().find('a').attr('id'); 
 
    listSec.push(Sec); 
 

 
    var parentModule = $(this).closest('ul').parent().closest('ul').parent().find('a').attr(/* id - need to replace the `name` */'name'); 
 
    listTA.push(parentModule); 
 
    }); 
 

 
    // show the result 
 
    $('#console').html('<p>' + JSON.stringify(listPart) + ',' + JSON.stringify(listSec) + ',' + JSON.stringify(listTA) + '</p>'); 
 
} 
 

 
// run the function whenever checkbox was changed 
 
$(':checkbox').change(check);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- you forgot the .tree element --> 
 
<div class="tree"> 
 
    <ul> 
 
     <li class='Root'> 
 
      <input type='checkbox' /><a href='#' name="Ar">First part</a> 
 
      <ul> 
 
       <li class='Root'> 
 
        <a id='6' href='#'> 
 
         <input type='checkbox' />Second part</a> 
 
        <ul class='SubRoot'> 
 
         <li> 
 
          <input id='1' type='checkbox' />Third part</li> 
 
         <li> 
 
          <input id='2' type='checkbox' />Third part</li> 
 
        </ul> 
 
       </li> 
 
       <li class='Root'><a id='7' href='#'> 
 
        <input type='checkbox' />Second part</a> 
 
        <ul class='SubRoot'> 
 
         <li> 
 
          <input id='1' type='checkbox' />Third part</li> 
 
        </ul> 
 
       </li> 
 
      </ul> 
 
     </li> 
 
     <li class='Root'> 
 
      <input type='checkbox' /><a href='#' name="Ar">First part</a> 
 
      <ul> 
 
       <li class='Root'> 
 
        <a id='6' href='#'> 
 
         <input type='checkbox' />Second part</a> 
 
        <ul class='SubRoot'> 
 
         <li> 
 
          <input id='1' type='checkbox' />Third part</li> 
 
        </ul> 
 
       </li> 
 
      </ul> 
 
     </li> 
 
    </ul> 
 
</div> 
 
<!-- show the result --> 
 
<div id="console"></div>

來源

2015-11-04 16:15:00

你可以使用以下的選擇尋找第三級別選中的複選框...

$('.tree>ul>li>ul>li>ul>li>input[type="checkbox"]:checked')

來源

2015-11-04 16:51:44

回答

相關問題