jQuery在div中获取所有复选框+文本输入

时间:2013-10-03 04:14:14

标签: javascript jquery

我有一个从PHP脚本动态生成的以下标记(意味着有可变数字复选框或输入字段)。

<div id="resCondition" class="col-lg-10">
    <div class="checkbox">
        <label>
            <input type="checkbox" value="apples">I want apples                   
        </label>
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox" value="pears">I want pears
        </label>
    </div>
    <div class="input-group">
        <span class="input-group-addon">I want</span>
        <input type="number" min="0" class="form-control" value="0">
        <span class="input-group-addon">forks</span>
    </div>
</div>

目标

如何将所有选中的选项与输入组值一起放在一个字符串中? 例如。如果用户选中上面的两个框并在输入字段中输入3。我返回的字符串为apples + pears + 3 forks。如果用户只检查第一个框,那么我将只获得apples

尝试

我找到了将所有复选框加入

字符串的代码
var selected = $('#resCondition input:checked').map(function(i,el){return el.val;}).get().join('+');

但我不知道如何获得输入:数字及其附带的文字。

4 个答案:

答案 0 :(得分:2)

您可以检查输入的类型,如果类型为number,您可以将值与元素的下一个兄弟的textContent连接起来。请注意,您应该使用value而不是val.val()是jQuery对象的方法(而不是属性),此处el是HTMLElement对象。

$('#resCondition').find('input:checked, input[type=number]').map(function(i,el) {
     return   el.type === 'checkbox' 
            ? el.value 
            : el.value > 0 ? el.value + ' ' + $(el).next().text() : null; 
}).get().join(' + ');

http://jsfiddle.net/ekQ5f/

答案 1 :(得分:0)

这样的事情应该有效:

$( "#resCondition" ).find( "input:checked, input[type=number]" ).map(function() {
    return this.value;
}).get();

答案 2 :(得分:0)

你应该得到所有的输入。然后检查是否已检查或值不为零。

试试这个 - DEMO http://jsfiddle.net/chokchai/RnfMC/

var text = [];

$('#resCondition :input').each(function(){
    if($(this).is(':checked') || parseInt($(this).val()) > 0){
        text.push($(this).val())
    }
})

text = text.join(' ');

alert(text);

答案 3 :(得分:-1)

您可以将其用作您的要求

var selected = new Array();
$('#checkboxes input:checked').each(function() {
    selected.push($(this).attr('name'));
});

或者从http://api.jquery.com/checked-selector/

获取帮助