checkbox互斥js

『壹』 js實現checkbox全選、不選與反選的方法

本文實例講述了js實現checkbox全選、不選與反選的方法。分享給大家供大家參考。具體分析如下：
一、思路：
1.
獲取元素
2.
給全選
不選
反選添加點擊事件
3.
用for循環checkbox
4.
把checkbox的checked設置為true即實現全選
5.
把checkbox的checked設置為false即實現不選
6.
通過if判斷，如果checked為true選中狀態的，就把checked設為false不選狀態，如果checked為false不選狀態的，就把checked設為true選中狀態。
二、html代碼：
<input
type="button"
value="全選"
id="sele"/>
<input
type="button"
value="不選"
id="setinterval"/>
<input
type="button"
value="反選"
id="clear"/>
<div
id="checkboxs">
<input
type="checkbox"/><br
/>
<input
type="checkbox"/><br
/>
<input
type="checkbox"/><br
/>
<input
type="checkbox"/><br
/>
<input
type="checkbox"/><br
/>
<input
type="checkbox"/><br
/>
<input
type="checkbox"/><br
/>
<input
type="checkbox"/><br
/>
<input
type="checkbox"/><br
/>
<input
type="checkbox"/><br
/>
<input
type="checkbox"/><br
/>
<input
type="checkbox"/><br
/>
<input
type="checkbox"/><br
/>
<input
type="checkbox"/><br
/>
<input
type="checkbox"/><br
/>
<input
type="checkbox"/><br
/>
</div>
三、js代碼：
<script>
window.onload=function(){
var
sele=document.getElementById('sele');//獲取全選
var
unsele=document.getElementById('setinterval');//獲取不選
var
clear=document.getElementById('clear');//獲取反選
var
checkbox=document.getElementById('checkboxs');//獲取div
var
checked=checkbox.getElementsByTagName('input');//獲取div下的input
//全選
sele.onclick=function(){
for(i=0;i<checked.length;i++){
checked[i].checked=true
}
}
//不選
unsele.onclick=function(){
for(i=0;i<checked.length;i++){
checked[i].checked=false
}
}
//反選
clear.onclick=function(){
for(i=0;i<checked.length;i++){
if(checked[i].checked==true){
checked[i].checked=false
}
else{
checked[i].checked=true
}
}
}
}
</script>
希望本文所述對大家的javascript程序設計有所幫助。

『貳』 javascript如何獲取checkbox值並且計算

有兩種方法：

1、方法一HTML結構如下：

二、後台獲得參數為：

• //獲得的均為數組值：

  String checboxValues=request.getParameter("checboxValue");

  String checboxTexts=request.getParameter("checboxText");

• //得到每個具體值：

  String checboxValue=checboxValues.split(",");

  String checboxText=checboxTexts.split(",");

三、備註：

• nextSibling是獲得當前對象的下一個對象，nodeValue是返回一個節點的值

• 使用該方法必須保證文本值在input後面，否則checkboxStr[i].nextSibling.nodeValue獲取不到文本值。