Question

我需要一个jQuery函数，它迭代嵌套的ul li组件，找出.ch类中定义的数字，复选框被选中，只有那些将被推入数组。

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

完整代码

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

演示：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/

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

2 个答案: