循环检查复选框并选择 :checked 复选框值？答案

【问题标题】：Looping through checkboxes and choosing the :checked checkbox value?循环检查复选框并选择 :checked 复选框值？
【发布时间】：2013-06-23 00:38:27
【问题描述】：

我为每个数组属性都有一个数组，循环输入复选框，我可以返回选中输入的值，但它会输出数组的每个实例。

     $('#moon-generator-settings .moon-generator-attr').each(function() {
        if ( $(this).val() !== '') {
            $('#moon-generator-result').val( $('#moon-generator-result').val() + ' ' + $(this).attr('name') + '="' + $(this).val() + '"' );                
        }

这会将代码输出到 wordpress 上的编辑器中，代码应如下所示

      [icons myicon="globe"]

而是返回

      [icons myicon="globe" myicon="pencil" myicon="plus" myicon="minus" myicon="left" myicon="up" myicon="right" myicon="down" myicon="home" myicon="pause" myicon="fast-fw" myicon="fast-bw" myicon="to-end" myicon="to-start" myicon="stop"]

myicon 所在的位置，即 $(this).attr('name') 所在的位置，而 $(this).val() 显然是 myicon 等于的值，即我输入中的值。我无法仅返回输入的检查值，而不是全部，这使我怀疑复选框未正确返回。

这里还有一些代码。

     $('#moon-generator-insert').live('click', function(event) {

    var queried_shortcode = $('#moon-generator-select').find(':checked').val();
    var moon_compatibility_mode_prefix = $('#moon-compatibility-mode-prefix').val();

    $('#moon-generator-result').val('[' + moon_compatibility_mode_prefix + queried_shortcode);

    $('#moon-generator-settings .moon-generator-attr').each(function() {
        if ( $(this).val() !== '') {
            $('#moon-generator-result').val( $('#moon-generator-result').val() + ' ' + $(this).attr('name') + '="' + $(this).val() + '"' );                
        }

    });

    $('#moon-generator-result').val($('#moon-generator-result').val() + ']');

我已经阅读了尽可能多的内容，但我认为 .find(:checked).val() 不应该这样写？

这是解析后的 HTML 格式的 php

     <div class="icons">
     <input class="moon-generator-attr" type="checkbox" value="globe" name="myicon">
     <input class="moon-generator-attr" type="checkbox" value="pencil" name="myicon">
     <input class="moon-generator-attr" type="checkbox" value="plus" name="myicon">
     <input class="moon-generator-attr" type="checkbox" value="minus" name="myicon">
     <input class="moon-generator-attr" type="checkbox" value="left" name="myicon">
     <input class="moon-generator-attr" type="checkbox" value="up" name="myicon">
     <input class="moon-generator-attr" type="checkbox" value="right" name="myicon">
     <input class="moon-generator-attr" type="checkbox" value="down" name="myicon">
     <input class="moon-generator-attr" type="checkbox" value="home" name="myicon">
     <input class="moon-generator-attr" type="checkbox" value="pause" name="myicon">
     <input class="moon-generator-attr" type="checkbox" value="fast-fw" name="myicon">
     <input class="moon-generator-attr" type="checkbox" value="fast-bw" name="myicon">
     <input class="moon-generator-attr" type="checkbox" value="to-end" name="myicon">
     <input class="moon-generator-attr" type="checkbox" value="to-start" name="myicon">
     <input class="moon-generator-attr" type="checkbox" value="stop" name="myicon">
     </div>

所以这就是有效的方法...当使用选择选项下拉菜单时没有问题...

      <select id="moon-generator-attr-style" class="moon-generator-attr" name="style">
        <option>1</option>
        <option>2</option>
      </select>

Jquery

      $('#moon-generator-insert').live('click', function(event) {
    var queried_shortcode = $('#moon-generator-select').find(':selected').val();
    var moon_compatibility_mode_prefix = $('#moon-compatibility-mode-prefix').val();
    $('#moon-generator-result').val('[' + moon_compatibility_mode_prefix + queried_shortcode);
    $('#moon-generator-settings .moon-generator-attr').each(function() {
        if ( $(this).val() !== '' ) {
            $('#moon-generator-result').val( $('#moon-generator-result').val() + ' ' + $(this).attr('name') + '="' + $(this).val() + '"' );
        }
    });
    $('#moon-generator-result').val($('#moon-generator-result').val() + ']');

谢谢大家，非常感谢这里是更新的代码...

      $('#moon-generator-insert').live('click', function(event) {
    var queried_shortcode = $('#moon-generator-select').find(':selected').val();

    var moon_compatibility_mode_prefix = $('#moon-compatibility-mode-prefix').val();
    var result = $(".moon-generator-attr:checked").map(function () {
    var $this = $(this);
    return $this.attr("name") + '="' + $this.val() + '"';
    }).get().join(" ");

    $('#moon-generator-result').val('[' + moon_compatibility_mode_prefix + queried_shortcode);
    $('#moon-generator-settings .moon-generator-attr').each(function() {
        if ( $(this).val() !== '' ) {
            $('#moon-generator-result').val( $('#moon-generator-result').val() + ' ' + $(this).attr('name') + '="' + result + '"' );
        }
    });
    $('#moon-generator-result').val($('#moon-generator-result').val() + ']');

输出到这个

      [icons myicon="myicon="stop"" myicon="myicon="stop"" myicon="myicon="stop"" myicon="myicon="stop"" myicon="myicon="stop"" myicon="myicon="stop"" myicon="myicon="stop"" myicon="myicon="stop"" myicon="myicon="stop"" myicon="myicon="stop"" myicon="myicon="stop"" myicon="myicon="stop"" myicon="myicon="stop"" myicon="myicon="stop"" myicon="myicon="stop""]

这里是复选框 php

      // Checkbox
        if ( count( $attr_info['checks'] ) && $attr_info['checks'] ) {              
            $return .= '<div class="icons">';
            foreach ( $attr_info['checks'] as $attr_value ) {
                $attr_value_selected = ( $attr_info['default'] == $attr_value ) ? ' checked="checked"' : '';        
            $return .= '<input name="' . $attr_name . '" class="moon-generator-attr" type="checkbox" value="' . $attr_value . '" '.$attr_value_selected.'>  </input> ';

            }
            $return .= '</div>';
        }

这是数组

      'icons' => array(
            'name' => 'Icons',
            'type' => 'single',
            'atts' => array(
                'myicon' => array(
                    'checks' => array(
                        'globe',
                        'pencil',
                        'plus',
                        'minus',
                        'left',
                        'up',
                        'right',
                        'down',
                        'home',
                        'pause',
                        'fast-fw',
                        'fast-bw',
                        'to-end',
                        'to-start',
                        'stop',
                    ),
                    'desc' => __( 'Add an icon', 'moon-shortcodes' )
                )
            ),
            'usage' => '[icons myicon="globe"][/icons]',
            'desc' => __( 'Add Icon', 'moon-shortcodes' )
        ),

【问题讨论】：

可以分享一下html吗？至少更多这样我们可以看到你在迭代什么？
使用:checked selector
有没有想过缓存你的选择器？让生活变得轻松。并且（好的，取决于您使用的 jQ 版本）但是 .live() 很长时间 已弃用！
:selected 不适用于复选框或单选按钮，请改用 :checked。
这是我用作基础框架的开源插件，我知道默认情况下有 :selected 因为它在下拉选择中具有选项。我基本上添加了一个复选框循环...但我以为我摆脱了 :selected，你在哪里看到 :selected 在上面的代码中？

标签： jquery checkbox radio

【解决方案1】：

问题是，无论复选框是否被选中，它们仍然有一个值，所以.val()即使未选中也会返回该值。循环时需要通过:checked selector 过滤复选框。

以下代码将返回一个包含所有选中项的字符串：

var result = $(".moon-generator-attr:checked").map(function () {
        var $this = $(this);
        return $this.attr("name") + '="' + $this.val() + '"';
    }).get().join(" ");

alert("Result='" + result + "'");

这是一个小提琴：http://jsfiddle.net/bman654/NE8M9/ 只需点击一些复选框，然后点击Go

-- 来自 OP 的更新代码--

var queried_shortcode = $('#moon-generator-select').find(':selected').val();

var moon_compatibility_mode_prefix = $('#moon-compatibility-mode-prefix').val();
var checkedString = $(".moon-generator-attr:checked").map(function () {
    var $this = $(this);
    return $this.attr("name") + '="' + $this.val() + '"';
}).get().join(" ");

var resultString = '[' + moon_compatibility_mode_prefix +
                   queried_shortcode + ' ' + checkedString + ']';

$('#moon-generator-result').val(resultString);

【讨论】：

好吧，完美，这就是我的感觉，我一直在按照这些术语查找东西，切换不也是合适的另一个词吗？无论如何，我不是 100% 确定如何将它与我现有的代码融合在一起。我敢打赌它非常有帮助，我只是脑力不足哈哈，你能解释一下如何结合它吗？你会很棒的！
我不明白你的问题
类似$('#moon-generator-result').val($('#moon-generator-result').val() + result + ']');
并缓存您的查找。不要一遍又一遍地输入$('#moon-generator-result')，只需输入var $result = $('#moon-generator-result') 并在任何地方使用$result.val()。输入更少，速度更快（每次输入很长的路时，jQuery 都必须搜索您的文档）。
@jahroy - $(...).map() 返回一个新的 jQuery 对象（实际上只是一个数组）。 get 将从 jQuery 对象中获取底层数组。这有点古怪，我更喜欢使用 ES5 Array.map ($elements.get().map(function (element) { ... }).join(" ")) 而不是 $.map 但由于我不知道 OP 的目标是什么，所以我坚持使用 $.map

【解决方案2】：

你把这弄得太复杂了。

这是一个fiddle，它显示了一个工作示例。

我将您的代码简化为：

$('#butt').click(function () {
    var txt = $('#output').text();
    $('.moon-generator-attr').each(function () {
        var $this = $(this);
        if ($this.prop('checked')) {
            var name = $this.attr('name');
            var val = $this.val();
            txt += ' ' + name + '="' + val + '"';
        }
    });
    $('#output').text(txt);
});

【讨论】：