jQuery獲取所有複選框+ div中的文本輸入

我有從PHP腳本（意思是有可變數字複選框或輸入字段）動態生成的以下標記。jQuery獲取所有複選框+ div中的文本輸入

<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。如果用戶只檢查第一個框，那麼我只會得到。

嘗試

我發現代碼加入所有選中的盒裝入一個字符串

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

，但我不知道我怎樣才能輸入：數量，並在其附帶的文字

來源

2013-10-03 chongzixin

您可以檢查輸入的類型，如果類型爲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/

來源

2013-10-03 04:21:10 undefined

謝謝！這很好用〜謝謝你提供關於'value'和'el'的更多信息。 – chongzixin

-1

您可以根據您的要求使用

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

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

來源

2013-10-03 04:19:37

，這並不顯得相當正確的。有沒有輸入與ID的「複選框」 –

嗯...對，但我認爲他可以通過自我添加輸入。 –

我不是那個倒票的人，但這看起來像錯誤的語法。你用'id =「checkboxes」'選擇所有輸入，這就是'＃'選擇器的作用。這有什麼用？ –

像這樣的東西應該工作：

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

來源

2013-10-03 04:21:53 dherman

這看起來最正確 –

我對.join（「+」）及其附加部分現在重新讀取問題做了一些修改，但修改我的答案以增加該問題應該是一件小事。 – dherman

你應該得到所有的輸入。然後檢查其檢查或值不爲零。

試試這個 - 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);

來源

2013-10-03 04:27:09 Chokchai

jQuery獲取所有複選框+ div中的文本輸入

回答

相關問題