使用jQuery獲取所選複選框的值

我想遍歷複選框組'locationthemes'並構建一個包含所有選定值的字符串。當複選框2和4被選爲那麼結果將是：「3,8」使用jQuery獲取所選複選框的值

<input type="checkbox" name="locationthemes" id="checkbox-1" value="2" class="custom" /> 
<label for="checkbox-1">Castle</label> 
<input type="checkbox" name="locationthemes" id="checkbox-2" value="3" class="custom" /> 
<label for="checkbox-2">Barn</label> 
<input type="checkbox" name="locationthemes" id="checkbox-3" value="5" class="custom" /> 
<label for="checkbox-3">Restaurant</label> 
<input type="checkbox" name="locationthemes" id="checkbox-4" value="8" class="custom" /> 
<label for="checkbox-4">Bar</label>

我曾經到過這裏：http://api.jquery.com/checked-selector/但有沒有例子，如何選擇由它的名字checkboxgroup。

我該怎麼做？

來源

2012-07-02 Flo

125

在jQuery中只需使用一個屬性選擇像

$('input[name="locationthemes"]:checked');

選擇名稱爲「locationthemes」所有檢查輸入

console.log($('input[name="locationthemes"]:checked').serialize()); 

//or 

$('input[name="locationthemes"]:checked').each(function() { 
    console.log(this.value); 
});

Demo

在VanillaJS

[].forEach.call(document.querySelectorAll('input[name="locationthemes"]:checked'), function(cb) { 
    console.log(cb.value); 
});

Demo

來源

2012-07-02 11:30:59 fcalderan

你，我的朋友，是一個拯救生命的人。 – Haring10

尤其我喜歡使用控制檯日誌的想法。感謝那。 –

$('input:checkbox[name=locationthemes]:checked').each(function() 
{ 
    // add $(this).val() to your array 
});

工作Demo

使用jQuery的is()功能：

$('input:checkbox[name=locationthemes]').each(function() 
{  
    if($(this).is(':checked')) 
     alert($(this).val()); 
});

來源

2012-07-02 11:33:24 Talha

You can also use the below code 
$("input:checkbox:checked").map(function() 
{ 
return $(this).val(); 
}).get();

來源

2014-02-24 11:05:39

如何將此結果分配到變量 –

使用jQuery的map功能

var checkboxValues = []; 
$('input[name=checkboxName]:checked').map(function() { 
      checkboxValues.push($(this).val()); 
});

來源

2015-03-24 19:13:24 MaylorTaylor

中，同時瞭解在此示例中checkboxName應該是「locationthemes」 – hrabinowitz

因此，所有在同一行：

var checkedItemsAsString = $('[id*="checkbox"]:checked').map(function() { return $(this).val().toString(); }).get().join(",");

..A注意有關選擇[id*="checkbox"]，它會抓住任何物品字符串「複選框」在其中。這裏有點笨拙，但如果你想從.NET CheckBoxList之類的東西中拉出選定的值，這真的很好。在這種情況下，「複選框」就是您給CheckBoxList控件的名稱。

來源

2015-07-02 23:05:32 mike

映射數組是最快和最乾淨的。

var array = $.map($('input[name="locationthemes"]:checked'), function(c){return c.value; })

將返回值作爲像的數組：

array => [2,3]

假設城堡和穀倉進行了檢查，其他則不是。

來源

2016-03-03 19:08:35

$("#locationthemes").prop("checked")

來源

2016-05-16 15:37:19 Charles

這應該是一個註釋 –

使用jQuery獲取所選複選框的值

回答

相關問題