Блог

Главная - Вопросы по программированию - Ajax: добавить / удалить div с помощью чекбоксов

Ajax: добавить / удалить div с помощью чекбоксов

#javascript #ajax

#javascript #ajax

Вопрос:

Я создаю веб-страницу для своей стажировки и хочу добавить div «example», когда установлен флажок с именем «example». Я хочу удалить этот div, когда он не отмечен.
Я действительно не знаю, с чего начать и что делать.

Редактировать: Хорошо, я понял.
У меня есть несколько флажков, есть ли способ сделать это для всех?

Здесь я создаю свои флажки :

 my %labels = (
        'rdc7' => 'switch-rdc-7',
        'rdc8' => 'switch-rdc-8',
        'rdc4' => 'switch-rdc-4',
        '3750' => 'switch-3750' 
      );

    print $cgi->checkbox_group(
        -name => 'switch_choices',
        -values => ['rdc4', 'rdc7', 'rdc8', '3750'],
        -default => ['rdc7', 'rdc8'],
        -labels => %labels
    );

И когда это будет проверено, я хочу добавить div с помощью :
my $switch1 = SwitchGUI->new("switch-rdc-7", 24, 2);
(это создает div с id =»switch-rdc-7″).

Ответ №1:

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<script>
    $('input:checkbox').change(function(){
        if( $(this).is(':checked') ){
            $(this).after( $('<div class="example_text">Example</div>') );
        }else{
            $(this).next('.example_text').remove();
        }
    });
</script>

Комментарии:

1. Нет необходимости вводить зависимость от jQuery просто для отображения / скрытия div.

2. jQuery — чрезвычайно распространенный пакет. И он не сказал, что для этого требовалось использовать стандартную библиотеку javascript. Есть причина, по которой люди пишут библиотеки.

3. Возможно, нет, но есть вероятность, что это будет не единственный javascript на странице, плюс обслуживание из Google CDN означает, что скрипт, скорее всего, уже кэширован потенциальными пользователями

4. Небольшая проблема, .after() добавляет рядом с чекбоксом, как добавить в тело или в конкретный div?

5.Вам нужно выбрать его … например: $(‘#specific_div_id’).append( $(‘<div>Example</div>’) ); См. api.jquery.com/category/selectors api.jquery.com/append

Ответ №2:

Вы должны добавить событие onClick () для флажка, а затем определить, установлен флажок или нет. В зависимости от настроек, вы могли бы показывать / скрывать содержимое этого div.

Вам нужно будет использовать AJAX, если вы собираетесь извлекать его с сервера.