2013-05-17 45 views
0

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

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

如果您只希望三個中的一個使用單選按鈕。 – Gor

+1

如果檢查了多個,該怎麼辦? –

+0

是的,如果用戶選中了其中兩個,我只想存儲選中的複選框的2個值 – user2310422

回答

2

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

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

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

$_POST['vehicle']

+4

沒有提及服務器端語言..不好回答假設......! –

+0

但它的類別爲php –

+4

@Praveenkalal你爲什麼這麼說?無處不在標記PHP ... – Ian

-2

如果您使用jQuery:

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

console.log(vehicles); 
+1

甚至更​​簡單:'var vehicles = $(「input:checked」)。map(function(){return this.value;})。get();' – Ian

+2

是的,我看到了jQuery標籤... – RobG

+0

@RobG現在jQuery是不是標準的瀏覽器? ;-) – Ian

2

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

<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> 
+0

form.vechicle爲空 –

+1

@ GiorgosFandomas--沒有在我測試過的任何瀏覽器中,也沒有在過去20年中一般使用支持腳本的瀏覽器。 ;-) – RobG

-2

更新回答

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

0

外觀上現場演示

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> 

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