首頁 > 開發者 > JavaScript
標籤：javascript checkbox 複選框
JavaScript操作checkbox的方式和操作radio的方式相似，都是利用元素項的checked屬性來完成。先擷取checkbox元素集合，遍曆集合，對集合中的每一項做操作。
這裡講幾個常用的checkbox複選框的常見樣本。
給定頁面
<body><p><label for="hobby">Hobby: <input type="checkbox" name="hobby" value="reading" />閱讀 <input type="checkbox" name="hobby" value="climbing" />爬山 <input type="checkbox" name="hobby" value="running" />跑步 <input type="checkbox" name="hobby" value="fishing" />釣魚 <input type="checkbox" name="hobby" value="cooking" />做飯 </br></br><input type="button" value="Get Value" onclick="getValue()" /></label></p></body>
要擷取多選框的值，該怎麼處理呢？
跟擷取radio選項按鈕值的步驟相同。
1 擷取複選框元素集合
2 遍曆複選框元素
3 將選中的複選框的值拼接出來，返回
function getValue(){var hobbies = document.getElementsByName("hobby");var value;for (i=0; i<hobbies.length; i++){if (hobbies[i].checked){if (!value){value = hobbies[i].value;} else {value += "," + hobbies[i].value;}}}alert(value == undefined ? '' : value);}
這裡我們將複選框值拼接出來，之間用“，”分隔，返回的時候，如果沒有選中，則返回Null 字元串，而非JavaScript的預設空值undefined。
全選是複選框中常見的一個操作，選中所有的選項。
全選也是基於checked屬性的操作，遍曆所有的元素項，將每一個元素項的checked屬性都置為true。
<body><p><label for="hobby">Hobby: <input type="button" name="selectAll" value="selectAll" onclick="selectAll()" />全選 <input type="button" name="selectOther" value="selectOther" onclick="selectOther()" />反選</br></br><input type="checkbox" name="hobby" value="reading" />閱讀 <input type="checkbox" name="hobby" value="climbing" />爬山 <input type="checkbox" name="hobby" value="running" />跑步 <input type="checkbox" name="hobby" value="fishing" />釣魚 <input type="checkbox" name="hobby" value="cooking" />做飯 </br></br><input type="button" value="Get Value" onclick="getValue()" /></label></p></body>
全選時，首先需要判斷當前複選框是否處於全選的狀態，然後再適時的全選，或全不選。
判斷是否處於全選狀態：true，全選；false，非全選
function isSelectAll(){var hobbies = document.getElementsByName("hobby");for (i=0; i<hobbies.length; i++){if (!hobbies[i].checked){return false;}}return true;}
function selectAll(){var hobbies = document.getElementsByName("hobby");if (isSelectAll()){for (i=0; i<hobbies.length; i++){hobbies[i].checked = false;}} else {for (i=0; i<hobbies.length; i++){hobbies[i].checked = true;}}}
反選的操作即選中那些當前沒有被選中的項，並將當前選中的項取消。
function selectOther(){var hobbies = document.getElementsByName("hobby");for (i=0; i<hobbies.length; i++){if (hobbies[i].checked){hobbies[i].checked = false;} else {hobbies[i].checked = true;}}}
上面幾個例子，都是本人今天沒事寫的玩的，裡面可能有些操作不是很符合客戶體驗，如果您有更好的方案，可以提出來。但就通過上面的樣本，應該能很好的理解checkbox了吧。
其實 checkbox和radio一樣，都是基於checked屬性，對它們的操作就是對checked屬性的操作，技術checked屬性就可以了。
JavaScript操作checkbox複選框
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
