通过复选框循环并选择：checked复选框值？

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是，这正是$（本）。 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

问题是，复选框是否是检查，他们仍然有价值，所以即使未选中，也会返回该值。循环播放时，您需要按照: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); 
});