0

我试图根据单选按钮选择在复选框输入上自动选择一些,我能够做到这一点,但是对于我的清单我正在使用检查树插件,当我尝试读取输入元素时它没有采取...... .:(

下面是我的代码,

<script>
 $(function() {
$('.check-all').live('change', function(){
    $('.options').find('input[class=def]').attr('checked', true);
    return false;
});
$('.uncheck-all').live('change', function(){
    $('.options').find('input[class=def]').attr('checked', false);
    return false;
});
 });
</script>
<script type="text/javascript">
    var $checktree;
    $(function(){
        $checktree = $("ul.tree").checkTree();
        });
</script>
 <div id="main">
 <div class="full_w" >
  <div class="b2"><b>Define categories </b></div></div>
    <div id="cat_left">
  <div class="content">
</div>
<form action="http://localhost:8080/cgi-bin/cat_checkbox.pl" method="POST" name="form1">
<div class="options">
    <ul>
    <label><input type="radio" name="Selection" class="check-all" value="Default" id="type_0" checked="checked" />Default</label>
    <label><input type="radio" name="Selection" class="uncheck-all" value="Custom" id="type_1" />Custom</label>
    </ul>
    <ul>
    <li><input type="checkbox" class="def"id="option1" /><label for="option1">Option 1</label></li>
    <li><input type="checkbox" class="def" id="option2" /><label for="option2">Option 2</label></li>
    <li><input type="checkbox" class="def" id="option3" /><label for="option3">Option 3</label></li>
    <li><input type="checkbox" class="def" id="option4" /><label for="option4">Option 4</label></li>
    <li><input type="checkbox" id="option5" /><label for="option5">Option 5</label></li>
    </ul>

    // I tried till here its working fine, not able to do this same stuff foe below input elements  
</div>  
 <ul class="tree">
 <li><input type="checkbox"><label>Select All</label>
 <ul>
  <li><input class="cate" type='checkbox' class="def" name='v1' id='1' value='1'><label style=""; alt="">main1</label>
    <ul>
    <li><input type='checkbox' class="def" name='chk_0' value='1'><label>option1</label></li>
    <li><input type='checkbox'  class="def" name='chk_1' value='1'><label>option1</label></li>
</ul>
   </li>
 <li><input type='checkbox' name='' id='10' value='1'><label>main2</label>
    <ul>
    <li><input type='checkbox' name='' id='chk_7'' value='1'><label>option1</label></li>
    <li><input type='checkbox' class="def" name='chk_4' id='chk_8' value='1'><label>option1</label></li>
    <li><input type='checkbox' name='chk_5' id='chk_9' value='1'><label>option1</label></li>
</ul>
</li>
<li><input type='checkbox' name='' id='10' value='1'><label>main3</label>
    <ul style="width: 90%">
    <li><input type='checkbox' name='' id='chk_7'' value='1'><label>option1</label></li>
    <li><input type='checkbox' name='chk_4' id='chk_8' value='1'><label>option1</label></li>
    <li><input type='checkbox' name='chk_5' id='chk_9' value='1'><label>option1</label></li>
</ul>
 </li>
 </ul></li>
</ul>
</div>
<p><input type="submit" value="Submit"></p>
<INPUT  type="hidden" SIZE=20 NAME="ip_adrress" value={{ ip }} >
</form>

这是Checktree插件

(function(jQuery) {
jQuery.fn.checkTree = function(settings) {
 settings = jQuery.extend({
    onExpand: null,
    onCollapse: null,
    onCheck: null,
    onUnCheck: null,
    onHalfCheck: null,
    onLabelHoverOver: null,
    onLabelHoverOut: null,
    labelAction: "expand",
    debug: false
}, settings);
    var $tree = this;
    $tree.find("li")        // Hide all of the sub-trees
    .find("ul:not(:first-child)").hide().end()// Hide all checkbox inputs
    .find(":checkbox").change(function(){
        var $all = jQuery(this).siblings("ul").find(":checkbox");
        var $checked = $all.filter(":checked");
            if($checked.length == 0) {
                jQuery(this)
                    .attr("checked", "")
                    .siblings(".checkbox")
                        .removeClass("checked")
                        .removeClass("half_checked")
                ;
                if (settings.onUnCheck) settings.onUnCheck(jQuery(this).parent());
            }
            else if ($all.length == $checked.length) {
                jQuery(this)
                    .attr("checked", "checked")
                    .siblings(".checkbox")
                        .removeClass("half_checked")
                        .addClass("checked")
                ;
                // Fire parent's onCheck callback
                if (settings.onCheck) settings.onCheck(jQuery(this).parent());
            }
            // Some children are checked, makes the parent in a half checked state.
            else { 
                // Fire parent's onHalfCheck callback only if it's going to change
                if (settings.onHalfCheck && !jQuery(this).siblings(".checkbox").hasClass("half_checked"))
                    settings.onHalfCheck(jQuery(this).parent());

                jQuery(this)
                    .attr("checked", "")
                    .siblings(".checkbox")
                        .removeClass("checked")
                        .addClass("half_checked")
                ;
            }
        })
        .css("display", "none")
    .end()

    .each(function() {

        // Go through and hide only ul's (subtrees) that do not have a sibling div.expanded:
        // We do this to not collapse *all* the subtrees (if one is open and checkTree is called again)
        jQuery(this).find("ul").each(function() {
            if (!jQuery(this).siblings(".expanded").length) jQuery(this).hide();
        });

        // Copy the label
        //var $label = jQuery(this).children("label").clone();
        // Create or the image for the checkbox next to the label
        var $checkbox = jQuery("<div class=\"checkbox\"></div>");
        // Create the image for the arrow (to expand and collapse the hidden trees)
        var $arrow = jQuery("<div class=\"arrow\"></div>");

        var $cb = jQuery(this).children(":checkbox");



        // If the li has children:
        if (jQuery(this).is(":has(ul)")) {
            // If the subtree is not visible, make the arrow collapsed. Otherwise expanded.
            if (jQuery(this).children("ul").is(":hidden")) $arrow.addClass("collapsed");
            else $arrow.addClass("expanded");

            // When you click the image, toggle the child list
            $arrow.click(function() {
                jQuery(this).siblings("ul").toggle();

                // Swap the classes: expanded <-> collapsed and fire the onExpand/onCollapse events
                if (jQuery(this).hasClass("collapsed")) {
                    jQuery(this)
                        .addClass("expanded")
                        .removeClass("collapsed")
                    ;
                    if (settings.onExpand) settings.onExpand(jQuery(this).parent());
                }
                else {
                    jQuery(this)
                        .addClass("collapsed")
                        .removeClass("expanded")
                    ;
                    if (settings.onCollapse) settings.onCollapse(jQuery(this).parent());
                }
            });
        }

        // When you click the checkbox, it should do the checking/unchecking
        if ($cb.attr("disabled"))
        {
            $checkbox.addClass("disabled");
        }
        else
        {
        $checkbox.click(function() {
            // Toggle the checked class)
            jQuery(this)
                .toggleClass("checked")
                // if it's half checked, its now either checked or unchecked
                .removeClass("half_checked")
            ;

            // Check/uncheck children depending on our status.
            if (jQuery(this).hasClass("checked")) {
                    // Set the (real, hidden) checkbox to checked
                    jQuery(this).siblings(":checkbox").attr("checked", "checked");
                // Fire the check callback for this parent
                if (settings.onCheck) settings.onCheck(jQuery(this).parent());

                // Go to the sibling list, and find all unchecked checkbox images
                jQuery(this).siblings("ul").find(".checkbox").not(".checked").not(".disabled")
                    // Set as fully checked:
                    .removeClass("half_checked")
                    .addClass("checked")

                    // For each one, fire the onCheck callback
                    .each(function() {
                        if (settings.onCheck) settings.onCheck(jQuery(this).parent());
                    })

                    // For each one, check the checkbox (actual input element)
                    .siblings(":checkbox")
                        .attr("checked", "checked")
                ;
            }

            // If Unchecked:
            else {
                    // Set the (real, hidden) checkbox to unchecked.
                    jQuery(this).siblings(":checkbox").attr("checked", "");

                // Fire the uncheck callback for this parent
                if (settings.onUnCheck) settings.onUnCheck(jQuery(this).parent());

                // Go to the sibling list and find all checked checkbox images
                jQuery(this).siblings("ul").find(".checkbox").filter(".checked").not(".disabled")
                    // Set as fully unchecked
                    .removeClass("half_checked")
                    .removeClass("checked")

                    // For each one fire the onUnCheck callback
                    .each(function() {
                        if (settings.onUnCheck) settings.onUnCheck(jQuery(this).parent());
                    })

                    // For each one, uncheck the checkbox (the actual input element)
                    .siblings(":checkbox")
                        .attr("checked", "")
                ;
            }

            // Tell our parent checkbox that we've changed (they might need to change their state)
            jQuery(this).parents("ul").siblings(":checkbox").change();
        });
        }

        // Add the appropriate classes to the new checkbox image based on the old one:
        if (jQuery(this).children(".checkbox").hasClass("checked"))
            $checkbox.addClass("checked");
        else if (jQuery(this).children(":checkbox").attr("checked")) {
            $checkbox.addClass("checked");
            jQuery(this).parents("ul").siblings(":checkbox").change()
        }
        else if (jQuery(this).children(".checkbox").hasClass("half_checked"))
            $checkbox.addClass("half_checked");

        // Remove any existing arrows or checkboxes or labels
        jQuery(this).children(".arrow").remove();
        jQuery(this).children(".checkbox").remove();
        //jQuery(this).children("label").remove();

        // Prepend the new arrow, label, and checkbox images to the front of the LI
        jQuery(this)
            //.prepend($label)
            .prepend($checkbox)
            .prepend($arrow)
        ;
    })

    .find("label")
        // Clicking the labels should do the labelAction (either expand or check)
        .click(function() {
            var action = settings.labelAction;
            switch(settings.labelAction) {
                case "expand":
                    jQuery(this).siblings(".arrow").click();
                    break;
                case "check":
                    jQuery(this).siblings(".checkbox").click();
                    break;
            }
        })

        // Add a hover class to the labels when hovering
        .hover(
            function() { 
                jQuery(this).addClass("hover");
                if (settings.onLabelHoverOver)  settings.onLabelHoverOver(jQuery(this).parent());
            },
            function() {
                jQuery(this).removeClass("hover");
                if (settings.onLabelHoverOut)                  settings.onLabelHoverOut(jQuery(this).parent());
            }
        )
    .end()
;

return $tree;
};
})(jQuery);
4

1 回答 1

1

$("ul.tree")在 DOM 完全加载之前正在执行,jQuery 看不到它。我相信将那段代码onload移动到事件中,或者移动到 DOM 的底部,它会起作用。

好的...我相信我现在明白了。

$('.check-all').live('change', function(){
    $('.options').find('input[class=def]').attr('checked', true);
    //This line should select the ones marked with the class ".def"
    $('ul.tree').find('input.def').siblings("div.checkbox").click();
    return false;
});

还值得注意的是,我从jquery-checktree重新下载了插件。

于 2013-01-30T07:10:19.280 回答