jQuery在div中獲取所有復選框和文本輸入

Question

我有以下標記是從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('+');

但我不確定如何獲取input：number及其隨附的文本。

Answer 1

您可以檢查輸入的類型，如果類型是number ，則可以將值與元素下一個同級的textContent連接起來。 請注意，您應該使用value ，而不是val ， .val()是jQuery對象的方法（而不是屬性），在這里el是一個HTML元素的對象。

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

Answer 2

這樣的事情應該起作用：

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

Answer 3

您應該獲得所有輸入。 然后檢查其已檢查或值不為零。

試試看-演示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);

Answer 4

您可以根據需要使用

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

或從http://api.jquery.com/checked-selector/獲取幫助