數組中的複選框值javascript

Question

我有一個複選框列表，我的目標是創建和存儲複選框的值只有一個被選中。有人可以用這個指導我嗎？

<input type="checkbox" name="vehicle" value="Bike"/> 
<input type="checkbox" name="vehicle" value="Car"/> 
<input type="checkbox" name="vehicle" value="Airplane"/> 

Answer 1

請做一兩件事改變名稱vehicle到vehicle[]

<input type="checkbox" name="vehicle[]" value="Bike"/> 
<input type="checkbox" name="vehicle[]" value="Car"/> 
<input type="checkbox" name="vehicle[]" value="Airplane"/> 

在後您將收到確認車輛價值的數組，你可以存儲它到DB

在$_POST['vehicle']

Answer 2

如果您使用jQuery：

var vehicles = []; 
$("input:checked").each(function() { 
    vehicles.push($(this).val()); 
}); 

console.log(vehicles); 

Answer 3

你真的應該顯示一些你已經嘗試過的代碼。您可以通過名字來取得的複選框，然後遍歷它們，收集被檢查者的價值觀：

<script> 

function getCheckboxValues(form) { 
    var values = []; 
    var vehicles = form.vehicle; 

    for (var i=0, iLen=vehicles.length; i<iLen; i++) { 
    if (vehicles[i].checked) { 
     values.push(vehicles[i].value); 
    } 
    } 
    // Do something with values 
    alert("Vehicles: " + values.join(', ')); 
    return values; 
} 

</script> 

<form onsubmit="getCheckboxValues(this); return false;"> 
    Bike: <input type="checkbox" name="vehicle" value="Bike"><br> 
    Car: <input type="checkbox" name="vehicle" value="Car"><br> 
    Aeroplane: <input type="checkbox" name="vehicle" value="Airplane"><br> 
    <input type="reset"> <input type="submit"> 
</form> 

Answer 4

更新回答

var input = document.getElementsByTagName('input') 
, value = {0:'', 1:'', 2:''} 
, x = input.length-- 
, array 
, box 
; 
function handle (x) { 

input[x].onchange = function() { 
    box  = input[x]; 
    value[x] = box.checked ? box.value : ''; 
    array = [value[0], value[1], value[2]]; 

    console.log(array);  
}; 
} 

while (x) handle(--x); 

Working fiddle

Answer 5

外觀上現場演示

http://jsbin.com/uwewi

<script> 
$('input[name=vahicle]').click(function() { 
    $('input[name=vahicle]:checked').not(this).removeAttr('checked'); 
}); 
</script> 

OR

jQuery - checkboxes like radiobuttons

如果你想獲得僅是其中這比請你radio按鈕它的最好辦法值。

<input type="radio" name="vehicle" value="Bike"/> 
<input type="radio" name="vehicle" value="Car"/> 
<input type="radio" name="vehicle" value="Airplane"/> 

OR

如果你想要去checkbox比你下面的jQuery;

<input type="checkbox" name="vehicle" value="Bike"/> 
<input type="checkbox" name="vehicle" value="Car"/> 
<input type="checkbox" name="vehicle" value="Airplane"/> 
<script> 
$('input[name=vahicle]').click(function(){ 
    $('input[name=vahicle]').removeAttr('checked'); 
    $(this).attr('checked', true); 

}); 
</script> 

希望這會幫助你... !!