Question

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

     $('#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' )
        ),

Answer 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);

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

循环选中复选框并选中：选中复选框值？

2 个答案: