CODEWITHSUNDEEP
jqueryasp.nethtmlcheckbox
AGuyCalledGerald
AGuyCalledGerald

Reputation: 8150

jQuery manipulation question

I have a repeater with the following content.

With jQuery, I want to manipulate the template as following: when I activate the checkbox, the background-color of the div with class "entryDiv" should become yellow. In the opposite case, it should become blue. Somehow, I don´t get it done.

<asp:Repeater ID="rep" runat="server">
            <ItemTemplate>
                <div runat="server" class="entryDiv" id="entryDiv">
                <div runat="server" id="cbDiv" class="cbDiv">
                    <asp:CheckBox ID="isUsedCheckBox" CssClass="cbIsUsed" runat="server" />
                </div>
                </div>
            </ItemTemplate>
        </asp:Repeater>

I think, the following script is correct, but how to proceed.

$(document).ready(function() {
    $('.cbIsUsed').change(function() {

    });

});

Upvotes: 0

Views: 132

Answers (7)

AGuyCalledGerald
AGuyCalledGerald

Reputation: 8150

There must be a jQuery bug- solutions only work with input checkbox, not .Net CheckBox-Control. With CheckBox, I would have to use the control-id, which seems not possible in this environment (repeater, jQuery doesn´t get the id).

Upvotes: 0

Bob Vale
Bob Vale

Reputation: 18474

$(".cbIsUsed").change(function() {
  $(this).parents(".entryDiv").css("background", $(this).is(":checked") ? "yellow" : "");
});

http://jsfiddle.net/HTNpc/

Upvotes: 1

Chandu
Chandu

Reputation: 82933

Try this:

$(document).ready(function() {     
    $('.cbIsUsed').change(function() {
        var $entryDiv = $(this).closest(".entryDiv");
        if(this.checked){
            $entryDiv.css({backgroundColor:"Yellow"});
        } else{
            $entryDiv.css({backgroundColor:"Blue"});
        }
    });  
});

Working Example: http://jsfiddle.net/kxBXw/1/

Upvotes: 1

boulaycote
boulaycote

Reputation: 602

$('.cbIsUsed').change(function() {
    $(this).parents(".entryDiv").css("background", this.checked ? "yellow" : "white");
});

Should do the trick.

Upvotes: 1

betamax
betamax

Reputation: 14061

$(document).ready(function() {
    $('.cbIsUsed').change(function() {
        var el = $(this).parents(".cbDiv");
        if($(this).prop("checked")) el.css("backgroundColor", "yellow");
        else el.css("backgroundColor", "blue");
    });
});

This checks if the checkbox is checked with if($(this).prop("checked")) and then using the parents method gets the parent div with the class .cbDiv and changes it's background colour to blue or yellow depending on what the value of checked is.

If you want to do this using CSS classes, you can use addClass and removeClass:

el.addClass("yellow").removeClass("blue");

Upvotes: 0

Gabe
Gabe

Reputation: 50503

How about this?

$(document).ready(function() {
    $('.cbIsUsed').change(function() {
        if($(this).is(':checked')){
           $(this).closest('.entryDiv.').css('background', '#ffff00');
        }
        else{
           $(this).closest('.entryDiv.').css('background', '#0000ff');            
        }
    });
});

Upvotes: 1

James Allardice
James Allardice

Reputation: 166021

Something like this should do the trick. It changes the background colour of the closest ancestor element with class "entryDiv" to yellow or blue, depending on whether the checkbox is checked or not:

$(".cbIsUsed").click(function() {
    if(this.checked) {
        $(this).closest(".entryDiv").css("background-color", "yellow"); 
    }
    else {
        $(this).closest(".entryDiv").css("background-color", "blue"); 
    }
});

See a working example here.

Upvotes: 1

Related Questions