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并将输入ID增加到o99_brsa_settingsbrsa_remove_menu_list2，但我糟糕的js技能不允许我考虑制作解决方案它在一个脚本中。

无论我尝试了什么，只是混淆了脚本，将一个复选框列表值发送到另一个输入字段，甚至一起更新所有这些（我尝试了5个实例。）

评论/回复后

编辑我

我更喜欢一个解决方案，我可以将同一个类归属于所有复选框..

Answer 1

如果每节课结尾都有一个数字，你可以这样：

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 2

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

有一个脚本可以附加所有ur的公共事件复选框，如下所示：

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（由“classname regular-text”标识），并根据需要显示该值。也没有任何迭代，你不需要你的脚本chage.Just添加HTML片段（确保你给出正确的className）...希望这有助于...... 对于JsFiddle：http://jsfiddle.net/GUZaD/9/

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');
});

JS：干掉jQuery脚本 - 复选框值到输入字段

3 个答案: