需要 Jquery foreach 函数来找出嵌套的 UL LI 选中的复选框项

Question

I need a jQuery function which iterates nested ul li components and find out the numbers which is defined in .ch class with checkboxes are checked and only those will be push in array.

<ul>
    <li><input type="checkbox" name="one" value="one"><span class="ch">20</span>AS One</li>
    <li><input type="checkbox" name="two" value="two"><span class="ch">43</span>AS Two</li>
    <li><input type="checkbox" name="user_roles" value="user_roles"><span class="ch">93</span>Users &amp; Roles <!-- SHOULD CHECK HERE -->
        <ul>
            <li><input type="checkbox" name="user_role" value="add"><span class="ch">15</span>Add</li>
            <li><input type="checkbox" name="user_role" value="delete"><span class="ch">234</span>Delete</li> <!-- CHECK HERE -->
        </ul>
    </li>
</ul>

Full code

HTML

<ul class="tree" id="tree">
    <li><input type="checkbox" name="account_settings" value="yes"><span class="ch">111</span>Account Settings <!-- AND SHOULD CHECK HERE -->
        <ul>
            <li><input type="checkbox" name="one" value="one"><span class="ch">20</span>AS One</li>
            <li><input type="checkbox" name="two" value="two"><span class="ch">43</span>AS Two</li>
            <li><input type="checkbox" name="user_roles" value="user_roles"><span class="ch">93</span>Users &amp; Roles <!-- SHOULD CHECK HERE -->
                <ul>
                    <li><input type="checkbox" name="user_role" value="add"><span class="ch">15</span>Add</li>
                    <li><input type="checkbox" name="user_role" value="delete"><span class="ch">234</span>Delete</li> <!-- CHECK HERE -->
                </ul>
            </li>
        </ul>
    </li>

    <li><input type="checkbox" name="rl_module" value="yes"><span class="ch">199</span>RL Module</li>

    <li><input type="checkbox" name="rl_module" value="yes"><span class="ch">154</span>Accounting
        <ul>
            <li><input type="checkbox" name="vat" value="yes"><span class="ch">122</span>VAT</li>
            <li><input type="checkbox" name="bank_account" value="yes"><span class="ch">233</span>Banking
                <ul>
                    <li><input type="checkbox" name="view" value="yes"><span class="ch">23</span>View</li>
                    <li><input type="checkbox" name="crud" value="yes"><span class="ch">12</span>CRUD</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

JavaScript

$('input[type=checkbox]').click(function(){
    if(this.checked){
        $(this).parents('li').children('input[type=checkbox]').prop('checked',true);
    }    
    $(this).parent().find('input[type=checkbox]').prop('checked',this.checked); 
});

var phrases = [];

$('.tree').each(function(){
    var phrase = '';
    $(this).find('li').each(function(){
        var current = $(this);

        if(current.children().size() > 0) {return true;}         
        phrase += $(this).text();
    });
    phrases.push(phrase);
});
// note the comma to separate multiple phrases
alert(phrases);

CSS

.ch {display:none}

JSFiddle link here

Answer 1

Demo: https://jsfiddle.net/qof1dxn7/

HTML:

<ul>
  <li>
    <input type="checkbox" name="one" value="one"><span class="ch">20</span>AS One</li>
  <li>
    <input type="checkbox" name="two" value="two"><span class="ch">43</span>AS Two</li>
  <li>
    <input type="checkbox" name="user_roles" value="user_roles"><span class="ch">93</span>Users &amp; Roles
    <!-- SHOULD CHECK HERE -->
    <ul>
      <li>
        <input type="checkbox" name="user_role" value="add"><span class="ch">15</span>Add</li>
      <li>
        <input type="checkbox" name="user_role" value="delete"><span class="ch">234</span>Delete</li>
      <!-- CHECK HERE -->
    </ul>
  </li>
</ul>

JS

$(function() {

  $('input:checkbox').change(function() {
  var arr = [];
    $('input:checked').each(function () {
            arr.push( parseInt($(this).next('.ch').text()) );
    });
    console.log(arr);
  });
});

Answer 2

$('input').on('change', function () {
        var numbers = '';
        $('input:checked').each(function () {
            numbers += $(this).next('.ch').text() + ', ';
    });
    alert(numbers);
});

jsFiddle: http://jsfiddle.net/Z82FR/34/