JS: Сушка скрипта jQuery - флажок значений в поле ввода

Question

У меня есть скрипт, который помещает значения флажков в (скрытое) поле ввода.

Вы можете увидеть это в действии здесь: http://jsfiddle.net/obmerk99/6DpmK/

jQuery(document).ready(function() {

            var $checkboxes = jQuery(".o99_remove_check");
            $checkboxes.on('change', function() {
                var ids = $checkboxes.filter(':checked').map(function() {
                    return this.value;
                }).get().join(' | ');
                jQuery('#o99_brsa_settingsbrsa_remove_menu_list').val(ids);
            });


        });

Проблема заключается в следующем: как я могу повторить это в течение нескольких итераций (как 2 в примере), но не повторяя себя с помощью jQuery (разметка генерируется php, поэтому это не проблема)

Прямо сейчас я просто повторяю весь сценарий, увеличивая класс флажка до o99_remove_check2 и идентификатор входа в o99_brsa_settingsbrsa_remove_menu_list2, но мои плохие навыки работы с JS не позволяют мне думать о решении сделать его одним скриптом.

Что бы я ни пытался, я просто перепутал скрипт, отправив одно значение списка флажков в другое поле ввода или даже обновил их все вместе (я попробовал с 5 экземплярами).

Изменить I после комментариев / ответов

Я бы предпочел решение, в котором я могу приписать один и тот же класс всем флажкам.

Answer 1

Оберните параметры в элемент div с именем класса "wrapper". Это будет содержать параметры и скрытое текстовое поле.

<div class="wrapper">
    <p>FIELD SET 1</p>
    <input class="checkbox o99_remove_check" type="checkbox" value="Option1" name="brsa-remove-SubMenu-general.php">Option1
    <br>
    <input class="checkbox o99_remove_check" type="checkbox" value="Option2" name="brsa-remove-SubMenu-writing.php">Option2
    <br>
    <input class="checkbox o99_remove_check" type="checkbox" value="Option3" name="brsa-remove-SubMenu-reading.php">Option3
    <br>
    <input type="text" value="" name="o99_brsa_settings[brsa_remove_menu_list]" id="o99_brsa_settingsbrsa_remove_menu_list_big" class="regular-text" disabled="true">
    <label for="o99_brsa_settingsbrsa_remove_menu_list_big" class="description">
        <br>this will actually be hiiden field</label>
    </p>
</div>

Есть сценарий, который будет прикреплять общее событие для всех ур флажок, как показано ниже:

jQuery(document).ready(function () {
 var $checkboxes = jQuery(".wrapper .checkbox");
    $checkboxes.on('change', function () {
        var ids = jQuery(this).parent().find('.checkbox').filter(':checked').map(function () {
            return this.value;
        }).get().join(' | ');
        jQuery(this).parent().find('.regular-text').val(ids)

    });
});

Этот сценарий найдет родителя выбранной группы флажков и найдет HiddenTextBox (идентифицируемый как "имя-класса-регулярного текста"), отображающий значение по вашему желанию. Кроме того, любые итерации не нужно, вам не нужно тратить время на сценарий. Просто добавьте фрагмент HTML (убедитесь, что вы указали правильное имя_класса)... Надеюсь, это поможет... для JsFiddle: http://jsfiddle.net/GUZaD/9/

Answer 2

Если в конце каждого класса есть число, вы можете сделать что-то вроде этого:

jQuery("[class^='o99_remove_check']").change(function() {
    var class = $(this).attr("class");
    var classNum = class.substr(class.length - 1); //Number at the end of each class

    var ids = $(".o99_remove_check"+classNum).filter(':checked').map(function() {
        return this.value;
    }).get().join(' | ');

    jQuery('#o99_brsa_settingsbrsa_remove_menu_list'+classNum).val(ids);
});

Answer 3

Если вы установите флажок селектора и скрытые переменные селектора поля функции, вы можете вызвать эту функцию дважды.

http://jsfiddle.net/SPuNy/

jQuery(document).ready(function () {

    var initCheckboxList = function (checkboxSelector, hiddenInputSelector) {
        var $checkboxes = jQuery(checkboxSelector);
        $checkboxes.on('change', function () {
            var ids = $checkboxes.filter(':checked').map(function () {
                return this.value;
            }).get().join(' | ');
            jQuery(hiddenInputSelector).val(ids);
        });
    }

    initCheckboxList('.o99_remove_check', '#o99_brsa_settingsbrsa_remove_menu_list_big');
    initCheckboxList('.o99_remove_check2', '#o99_brsa_settingsbrsa_remove_menu_list2');
});