0

我有一个将复选框值放入（隐藏）输入字段的脚本。

可以在这里看到它的实际效果：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 个实例。）

在评论/回复后编辑我

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

4

3 回答 3

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);
});
于 2013-05-07T14:58:54.583 回答
2

将您的选项包装在一个名为“包装器”的类名的 div 中。这将包含选项和隐藏的文本框。

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

于 2013-05-07T17:03:45.967 回答
0

如果您创建一个函数的复选框选择器和隐藏字段选择器变量，您可以调用该函数两次。

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');
});
于 2013-05-07T15:01:47.453 回答