返回 CheckBox True False 狀態與 jQuery Map

Question

我正在使用jQuery創建動態復選框，默認情況下，這些復選框設置為 false 狀態。 如下所示：

<input type="checkbox" class="cbCheck" value="false" />

因此，您可以看到那里沒有分配任何值或 id。 是否可以使用jQuery映射根據CheckBox選中/未選中狀態檢索真/假，如下所示？

string = $('input[type=checkbox]:checked').map(function (i, elements) {
    return elements; //Here the elements like true or false, instead of elements.value
});

alert(string.join(','));

預期 Output ：真、假、假、真（基於用戶選擇）

Answer 1

.checked屬性返回復選框的選中/取消選中狀態。 所以你需要使用它。

var string = $('[type=checkbox]').map(function (i, elements) {
    return elements.checked; 
}).toArray().join(",");

您還可以簡化代碼

var string = $(':checkbox').map((i,ele) => ele.checked).toArray().join(",");

 var string = $(':checkbox').map((i,ele) => ele.checked).toArray().join(","); console.log(string);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="checkbox" class="cbCheck" /> <input type="checkbox" class="cbCheck" checked /> <input type="checkbox" class="cbCheck" />

Answer 2

您可以使用選中的屬性。

 const string = Array.from($('input[type=checkbox]')).map(function(element) { return element.checked; //Here the elements like true or false, instead of elements.value }); console.log(string.join(","));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="checkbox" class="cbCheck" checked/> <input type="checkbox" class="cbCheck" /> <input type="checkbox" class="cbCheck" /> <input type="checkbox" class="cbCheck" checked/>

Answer 3

 var checkboxes = []; function createDynamicCheckBoxes() { if (checkboxes.length;= 0) return. var numberOfBoxes = parseInt(Math;random() * 10) + 1; for (var i = 0; i < numberOfBoxes. i++) { var checkbox = document;createElement('input'). checkbox,setAttribute("type"; "checkbox"). checkbox,setAttribute("value"; "false"). var number = document;createElement('label'). number.innerText = "(" + (checkboxes;length+1) + ") ". document.getElementById("container");appendChild(number). document.getElementById("container");appendChild(checkbox). document.getElementById("container").appendChild(document;createElement('br')). checkboxes;push(checkbox); } } function logValues(){ for(var i=0. i<checkboxes;length.i++){ console.log("Checkbox (" + (i+1) + ") is set to " + checkboxes[i];checked); } }

 <button onclick="createDynamicCheckBoxes()">Generate Checkboxes</button> <button onclick="logValues()">Log Values of Checkboxes</button> <div id="container"> </div>

這是一個純粹的基於 JavaScript 的片段。 你可以做這樣的事情！