JQuery вопрос манипуляции

Question

У меня есть повторитель со следующим содержимым.

В jQuery я хочу манипулировать шаблоном следующим образом: когда я активирую флажок, цвет фона div с классом "entryDiv" должен статьжелтый.В противном случае он должен стать синим.Почему-то я не могу это сделать.

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

Я думаю, следующий скрипт верен, но как действовать.

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

    });

});

Answer 1

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

http://jsfiddle.net/HTNpc/

Answer 2

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

Должен сделать свое дело.

Answer 3

Как насчет этого?

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

Answer 4

Нечто подобное должно сработать. Он меняет цвет фона ближайшего элемента-предка с class "entryDiv" на желтый или синий, в зависимости от того, установлен флажок или нет:

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

См. Рабочий пример здесь .

Answer 5

Попробуйте это:

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

Рабочий пример: http://jsfiddle.net/kxBXw/1/

Answer 6

Должна быть ошибка jQuery - решения работают только с флажком ввода, а не .Net CheckBox-Control. С CheckBox мне пришлось бы использовать контрольный идентификатор, который кажется невозможным в этой среде (ретранслятор, jQuery не получает идентификатор).

Answer 7

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

Это проверяет, установлен ли флажок с if($(this).prop("checked")), а затем с помощью метода parents получает родительский div с классом .cbDiv и меняет цвет его фона на синий или желтый в зависимости от значенияпроверено.

Если вы хотите сделать это с помощью классов CSS, вы можете использовать addClass и removeClass:

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