AM trying to autoselect some on checkbox input based on radio button selection , Am able to do this stuff , but for my checklist am making use of check-tree plugin , when I tried to read input elements its not taking …….:(
Below is my code ,
<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>
And here is Checktree plugin
(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);
Your$("ul.tree")is being executed before the DOM is fully loaded, jQuery can’t see it. I believe that moving that piece of code to aonloadevent, or moving to the bottom of your DOM it will work.Ok… I believe I got it now.
It’s also worth noting that I re-downloaded the plugin from jquery-checktree.