jquery - jQuery によって入力されたフォーム入力の奇妙な文字

Question

ショートコードを挿入するためにtinymceボタンで作業しています。これはショートコードのリストに基づいており、それぞれが js 構造から、そのショートコード オプションを含むポップアップ ウィンドウを開きます。

非常に単純化されたバージョンのコードは次のとおりです。

(function() {   
     tinymce.create('tinymce.plugins.sympleShortcodeMce', {
       init : function(ed, url){
       //do nothing
        },
        createControl : function(btn, e) {
            if ( btn == "symple_shortcodes_button" ) {
                var a = this;
                var btn = e.createSplitButton('symple_button', {
title: "Insert Shortcodes",
image: "shortcode-button.png",
icons: false,
                });
                btn.onRenderMenu.add(function (c, b) {
        a.render( b, "Caixa", "caixa" );
                });

              return btn;
            }
            return null;               
        },
        render : function(ed, title, id) {
            ed.add({
                title: title,
                onclick: function () {


// Box
if(id == "caixa") {
H = jQuery(window).height()* 0.9,
W = ( 720 < width ) ? 720 : width;
W = W - 120;
H = H - 84;
tb_show( 'Insert Box - Shortcode', '#TB_inline?width=' + W + '&height=' + H + '&inlineId=mycaixa-form' );
}

return false;
                }
            })
        }

    });
tinymce.PluginManager.add("symple_shortcodes", tinymce.plugins.sympleShortcodeMce);

// BOXES
jQuery(function(){
var formcaixa = jQuery('<div id="mycaixa-form"><table id="mycaixa-table" class="form-table">\
<tr>\
<th><label for="mycaixa-icone">Ícone</label></th>\
<td>\
<div class="nochecked"><input type="radio" name="icone" value="meh"><i class="icon-meh"></i></div>\
<div class="nochecked"><input type="radio" name="icone" value="smile"><i class="icon-smile"></i></div>\
<br />\
<small>Box icon</small></td>\
</tr><br />\
</table>\
<p class="submit">\
<input type="button" id="mycaixa-submit" class="button-primary" value="Create Box" name="submit" />\
</p>\
</div>');

var tablecaixa = formcaixa.find('table');
formcaixa.appendTo('body').hide();

jQuery('input[type="radio"]').on('change', function() {
vals = jQuery('input[type="radio"]:checked').map(function() {
return this.value;
}).get();
console.log(vals);
jQuery('#mycaixa-icone').val(vals);
}).change();

// handles the click event of the submit button
formcaixa.find('#mycaixa-submit').click(function(){
// defines the options and their default values
var options = {
'icone' : ''
};

if (tinyMCE.activeEditor.selection.getContent() == "") {
contentcaixa = "INSIRA CONTEÚDO"; }
else {contentcaixa = tinyMCE.activeEditor.selection.getContent();}

var shortcodecaixa = '[caixa';
for(var index in options) {
var value = tablecaixa.find('#mycaixa-' + index).val();         
// attaches the attribute to the shortcode only if it's different from the default value
if ( value !== options[index] ) {
shortcodecaixa += ' ' + index + '="' + value + '"';
} }
shortcodecaixa += ']'+contentcaixa+'[/caixa]';

// inserts the shortcode into the active editor
tinyMCE.activeEditor.execCommand('mceInsertContent', 0, shortcodecaixa);
// closes Thickbox
tb_remove(); }) })

/* END FORMS */ 
})();

だから、私がやろうとしているのは、チェックボックスの値を使用して入力テキストの値を設定することです。この値が取り込まれvar value = tablecaixa.find('#mycaixa-' + index).val();、ショートコードの作成に使用されます。

しかし、チェックボックスを変更すると、入力テキストの値が変更されますが、値とともに「2,public」が挿入されます。したがって、値が "smile" または "meh" の代わりに、"2,public,smile" または "2,public,meh" が得られます。

これは何ですか？