Checkbox 多選框是 HTML 表單控件中常用的一種組件，利用它們可以讓用戶對(duì)多個(gè)選項(xiàng)進(jìn)行選擇。而 JavaScript Object Notation （JSON）是一種輕量級(jí)的數(shù)據(jù)交換格式。在前端開發(fā)中，時(shí)常需要將多個(gè) Checkbox 的選中狀態(tài)整理成 JSON 格式發(fā)送給后端服務(wù)器，接下來我們將學(xué)習(xí)如何使用 JavaScript 收集多個(gè)多選框的選中狀態(tài)并轉(zhuǎn)換成 JSON 格式。

//html 代碼段
<form>
<input type="checkbox" id="apple" name="fruits" value="apple">
<label for="apple">Apple</label>
<input type="checkbox" id="orange" name="fruits" value="orange">
<label for="orange">Orange</label>
<input type="checkbox" id="banana" name="fruits" value="banana">
<label for="banana">Banana</label>
<button type="submit" onclick="submitHandler(event)">Submit</button>
</form>

以上是包含三個(gè) Checkbox 的表單組件，其中它的 “name” 屬性均為 “fruits”，即我們需要收集的數(shù)據(jù)類型。接下來，我們將使用以下函數(shù)收集表單數(shù)據(jù)：

function getFormData(form){
let formData = {};
let checkedItems = form.querySelectorAll('input[name=fruits]:checked');
for (const item of checkedItems) {
formData[item.value] = true;
}
return JSON.stringify(formData);
}

通過表單對(duì)象和查詢字符串獲取到所有名為 “fruits” 且被選中的元素，并將其組成一個(gè)對(duì)象，以選項(xiàng)的 value 為對(duì)象的鍵，以 true 值為對(duì)象的值。最后使用 JSON.stringify() 函數(shù)將對(duì)象轉(zhuǎn)換成 JSON 字符串。

// JavaScript 代碼
function submitHandler(event) {
event.preventDefault();
let formData = getFormData(event.target);
console.log(formData);
}
//輸出結(jié)果如下：
{"apple":true,"orange":true,"banana":true}

以上就是如何將多選框的選中狀態(tài)轉(zhuǎn)換成 JSON 格式的簡(jiǎn)單實(shí)現(xiàn)。在實(shí)際場(chǎng)景中，我們可以根據(jù)需求動(dòng)態(tài)調(diào)整表單元素的數(shù)量或類型。希望本文能夠幫助到你。