jQuery - 将文本输入和复选框的值转换为一个字符串(或数组)

时间:2015-08-27 15:55:16

标签: javascript jquery string checkbox input

我有三种类型的项目,我试图进入逗号分隔的字符串(或数组),我想显示它并在以后用于形成URL。

如何将这三种类型的数据放入同一个字符串或数组中?

  1. 现有的POST字符串
  2. 使用添加按钮从文本字段中自由输入
  3. 一系列核对的值
  4. 目前,使用我使用的代码,添加表单输入值会覆盖字符串,并且我无法弄清楚如何在取消选中其框时从字符串中删除复选框值。

    Here's the fiddle.

    我正在使用此HTML:

    <div class="srs-display">existingPostString</div>
    
    <ul id="srs" class="srs">
        <!-- START TEXT INPUT FIELD -->
        <li class="sr">
            <div class="masonry-well">
                <input id="sr-custom" type="text" placeholder="Add your own">
                <a class="add-sr-custom">Add</a>
            </div>
        </li>
        <!-- END TEXT INPUT FIELD -->
        <!-- START CHECKBOXES -->
        <li class="sr">
            <div class="masonry-well">
                <input id="srPredefined1" type="checkbox" name="srPredefined1" value="srPredefined1">
                <label for="srPredefined1" class="ts-helper">srPredefined1</label>
            </div>
        </li>
        <li class="sr masonry-item">
            <div class="masonry-well">
                <input id="srPredefined2" type="checkbox" name="srPredefined2" value="srPredefined2">
                <label for="srPredefined2" class="ts-helper">srPredefined2</label>
            </div>
        </li>
        <li class="sr masonry-item">
            <div class="masonry-well">
                <input id="srPredefined3" type="checkbox" name="srPredefined3" value="srPredefined3">
                <label for="srPredefined3" class="ts-helper">srPredefined3</label>
            </div>
        </li>
        <!-- END CHECKBOXES -->
    </ul>
    

    这是迄今为止我尝试过的JS:

    $('input[type="checkbox"]').bind('change', function() {
        var srs = 'existingPostString';
    
        $('input[type="checkbox"]').each(function(index, value) {
            if (this.checked) {
                /*add*/ /*get label text associated with checkbox*/
                srs += ($(this).val() + ', ');
            }
        });
        if (srs.length > 0) {
            srs = srs.substring(0,srs.length-2);
        } else {
            srs = 'No checks';
        }
    
        $('.srs-display').html(srs);
    });
    
    $(".add-sr-custom").on('click', function() {
        var srs = 'existingPostString';
    
        srs +=  ',' + $('#sr-custom').val();
        $('.srs-display').text(srs);
    })
    

2 个答案:

答案 0 :(得分:0)

我会将你的字符串元素推送到一个数组,然后在其上调用array.join(&#39;,&#39;)。像这样:

var srs = [];
//each checkbox
srs.push($(this).val());

//later
var new_string = srs.join(',');

答案 1 :(得分:0)

嗨,请检查此解决方案:https://jsfiddle.net/leojavier/onwkaLet/6/

var srs = [];

    $('input[type="checkbox"]').bind('change', function() {
         srs=[]
        $('input[type="checkbox"]').each(function(index, value) {
            if (this.checked) {
                srs.push($(this).val());
            }
        });

        $('.srs-display').html(srs);
    });

    $(".add-sr-custom").on('click', function() {
        $('#sr-custom').val(srs);
    })