Javascript Jquery：基于单选按钮选择自动选择某些复选框

我试图根据单选按钮选择自动选择一些复选框输入，我能够做这件事，但对于我的检查表，我使用了检查树插件，当我试图读取输入元素时，它不需要……：(

下面是我的代码

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

$（函数（）{
$（'.check all'）.live（'change'，function（）{
$（'.options'）.find（'input[class=def]'）.attr（'checked'，true）；
返回false；
});
$（'.uncheck all'）.live（'change'，function（）{
$（'.options'）.find（'input[class=def]'）.attr（'checked'，false）；
返回false；
});
});
var$checktree；
$（函数（）{
$checktree=$（“ul.tree”）.checktree（）；
});
定义类别

违约
习俗


选择1
选择2
选择3
选择4
备选案文5

//我一直尝试到这里，它工作得很好，不能对下面的输入元素做同样的事情

全选

main1

选择1
选择1


缅因州2

选择1
选择1
选择1

下面是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);

（函数（jQuery）{
jQuery.fn.checkTree=函数（设置）{
设置=jQuery.extend({
onExpand:null，
onCollapse:null，
onCheck:null，
onUnCheck:null，
onHalfCheck:null，
onLabelOver:null，
onLabelOverout:null，
标签：“扩展”，
调试：false
}，设置）；
var$tree=this；
$tree.find（“li”）//隐藏所有子树
.find（“ul:not（：first child）”）.hide（）.end（）//隐藏所有复选框输入
.find（“：checkbox”）.change（函数（）{
var$all=jQuery（this.sibbines（“ul”）.find（“：复选框”）；
var$checked=$all.filter（“：checked”）；
如果（$checked.length==0）{
jQuery（这个）
.attr（“选中”和“”）
.兄弟姐妹（“.复选框”）
.removeClass（“选中”）
.removeClass（“选中一半”）
;
if（settings.onUnCheck）settings.onUnCheck（jQuery（this.parent（））；
}
else if（$all.length==$checked.length）{
jQuery（这个）
.attr（“已检查”、“已检查”）
.兄弟姐妹（“.复选框”）
.removeClass（“选中一半”）
.addClass（“选中”）
;
//激发父级的onCheck回调
if（settings.onCheck）settings.onCheck（jQuery（this.parent（））；
}
//某些子项已选中，使父项处于半选中状态。
否则{
//仅当父级的onHalfCheck回调要更改时才触发它
if（settings.onHalfCheck&&！jQuery（this.sides）（.checkbox”）.hasClass（“half_checked”））
settings.onHalfCheck（jQuery（this.parent（））；
jQuery（这个）
.attr（“选中”和“”）
.兄弟姐妹（“.复选框”）
.removeClass（“选中”）
.addClass（“选中一半”）
;
}
})
.css（“显示”、“无”）
(完)
.each（函数（{
//仅浏览并隐藏没有同级div的ul（子树）。展开：
//我们这样做是为了不折叠*所有*子树（如果一个子树打开并且再次调用checkTree）
jQuery（this.find（“ul”）.each（function（）{
if（！jQuery（this）.slides（“.expanded”）.length）jQuery（this.hide（）；
});
//复制标签
//var$label=jQuery（this）.children（“label”）.clone（）；
//创建或删除标签旁边复选框的图像
var$checkbox=jQuery（“”）；
//为箭头创建图像（展开和折叠隐藏的树）
var$arrow=jQuery（“”）；
var$cb=jQuery（this）.children（“：复选框”）；
//如果li有孩子：
if（jQuery（this）.is（“：has（ul）”）{
//如果子树不可见，请将箭头折叠。否则，请将其展开。
if（jQuery（this.children（“ul”）.is（“：hidden”））$arrow.addClass（“collapsed”）；
else$arrow.addClass（“扩展”）；
//单击图像时，切换子列表
$arrow.单击（函数（）{
jQuery（this.sibbines（“ul”）.toggle（）；
//交换类：展开折叠并触发onExpand/onCollapse事件
if（jQuery（this）.hasClass（“折叠”））{
jQuery（这个）
.addClass（“扩展”）
.removeClass（“折叠”）
;
if（settings.onExpand）settings.onExpand（jQuery（this.parent（））；
}
否则{
jQuery（这个）
.addClass（“折叠”）
.removeClass（“扩展”）
;
if（settings.onCollapse）settings.onCollapse（jQuery（this.parent（））；
}
});
}
//当您单击复选框时，它应该执行选中/取消选中操作
如果（$cb.attr（“禁用”））
{
$checkbox.addClass（“已禁用”）；
}
其他的
{
$checkbox.单击（函数（）{
//切换选中的类）
jQuery（这个）
.toggleClass（“选中”）
//如果它被选中了一半，那么它现在要么被选中，要么被取消选中
.removeClass（“选中一半”）
;
//根据我们的状态选中/取消选中子项。
if（jQuery（this）.hasClass（“选中”））{
//将（真实、隐藏）复选框设置为选中
jQuery（this）.this（“：check
$('.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;
});