Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: для новичков > проблемы с чекбоксами

Автор: Hurray 17.3.2012, 20:29

Добрый день. Хочу сделать, чтобы при клике на чекбокс, он копировался в блок "<div class="container"></div>". Нужно, чтобы отмеченные чекбоксы дублировались.

Код


<div class="container"></div>
<input type="checkbox" name="checkbox_name" value="1">первый чекбокс<br>
<input type="checkbox" name="checkbox_name" value="2">второй чекбокс<br>
<input type="checkbox" name="checkbox_name" value="3">третий чекбокс<br>

Почему не работает такой скрипт?

Код


$(document).ready(function() {
    $('input[type="checkbox"]').click(function () {
        $('this').clone().appendTo(".container");
    });
});

После чекбокса идёт текст, не заключённый ни в какие теги, просто текст. Можно ли сделать, чтобы он копировался вместе с чекбоксом?
Как сделать, что бы при клике на чекбокс, находящийся в блоке "<div class="container"></div>", он удалялся оттуда, а чекбокс с тем же значением атрибута "value" вне блока становился бы неотмеченным?
Когда проверяю файербагом чекбоксы, отмеченные ни чем не отличаются от неотмеченных. Насколько я знаю, у отмеченных должен быть атрибут checked="checked", но файербаг почему-то его не видит. В чем тут дело?

Автор: Amphiluke 17.3.2012, 20:49

Цитата(Hurray @ 18.3.2012, 00:29

)

$('this')

Здесь не нужны кавычки.

Цитата(Hurray @ 18.3.2012, 00:29

)

После чекбокса идёт текст, не заключённый ни в какие теги, просто текст. Можно ли сделать, чтобы он копировался вместе с чекбоксом?

можно воспользоваться свойством nextSibling, и так же склонировать текстовый узел его методом .cloneNode (это метод DOM, а не jQuery)

Цитата(Hurray @ 18.3.2012, 00:29

)

Как сделать, что бы при клике на чекбокс, находящийся в блоке "<div class="container"></div>", он удалялся оттуда, а чекбокс с тем же значением атрибута "value" вне блока становился бы неотмеченным?

Код


$("div.container").delegate("input[type='checkbox']", "click", function() {
    $("input[value=" + this.value + "]")[0].checked = false;
    $(this).remove();
});

Цитата(Hurray @ 18.3.2012, 00:29

)

Насколько я знаю, у отмеченных должен быть атрибут checked="checked", но файербаг почему-то его не видит. В чем тут дело?

Смотрите на вкладке DOM.

Автор: ksnk 17.3.2012, 22:46

Цитата(Hurray @ 17.3.2012, 20:29

)

После чекбокса идёт текст

Лучше обрамить весь чекбокс вместе с текстом тегом label. Так и копировать будет проще и функционировать будет логичнее - нажал на текст - поменял чекбокс.
<label><input type="checkbox" name="checkbox_name" value="1">первый чекбокс</label><br>

А если чекбокс отмечен много раз - много копий должно появится? Может так будет лучше?

Код


$('input[type="checkbox"]').click(function () {
    if(this.checked){
        $(this).data('clone',$(this).parent().clone().appendTo(".container"));
    } else {
        $(this).data('clone').remove();        
    }
});