JavaScript check box operation checkbox

JavaScript checkbox manner similar to the operation manner and operation of the radio, we are using the checked attribute item element to complete. First obtain the checkbox element in the collection, through the collection, each item in the collection to do the operation.

The value

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

Gets the value of the check boxes, radio buttons with the step of acquiring radio values are the same.

1 acquires the collection box element
box element 2 traversal
value check box 3 will be selected and returned splicing

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);
}

Here we will checkbox value stitching out, with between "," to separate, when returned, if not checked, the empty string, instead of JavaScript's default null value undefined.

select all

Select the check box is a common operation, select all the options. Select is also based on the properties of the operation checked through all the elements of items, each element will be checked attribute items are set to 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>

When Select All, first need to determine whether the current check box is selected in the whole state, and then select all timely, or none of the election.

Determining whether the selected state is full: true, Select; false, non-Select

function isSelectAll(){
	var hobbies = document.getElementsByName("hobby");
	for (i=0; i<hobbies.length; i++){
		if (!hobbies[i].checked){
			return false;
		}
	}
	return true;
}

Select all

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;
		}
	}
}

Invert Selection

Inverse operation that is to select those items that are not currently selected, and will cancel the currently selected item.

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 and radio, are checked based on attributes, their operation is the operation of the checked attributes, remember checked attribute on it.