1.两个select 内容互换
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
#s1,#s2{
300px;
}
</style>
<body>
<select size="7" id="s1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<input type="button" id="b1" value="向左 " />
<input type="button" id="b2" value="向右" />
<input type="button" id = "b3" value="全选" />
<select size="7" id="s2">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
<option value="e">e</option>
</select>
</body>
</html>
<!--select互换-->
<script>
var s1 = document.getElementById("s1")
var s2 = document.getElementById("s2")
var b1 = document.getElementById("b1")
var b2 = document.getElementById("b2")
var b3 = document.getElementById("b3")
b1.onclick = function(){
s1.innerHTML += "<option>"+s2.value+"</option>"
s2.value = ""
}
b2.onclick = function(){
s2.innerHTML += "<option>"+s1.value+"</option>"
s1.value = ""
}
b3.onclick = function(){
}
</script>
2.单选按钮 同意可点击下一步
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="radio" id = "b1" />
<input type="button" id="b2" value="下一步" disabled="disabled"/>
</body>
</html>
<script>
// 单选按钮
var b1 = document.getElementById("b1");
var b2 = document.getElementById("b2");
b1.onclick = function(){
if(b1.checked){
b2.removeAttribute("disabled");
}else{
b2.setAttribute("disabled","disabled")
}
}
</script>
3.全选框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
全选:<input type="button" id="b1" value="全选" /> 不选:
<input type="button" id="b2" value="全不选" /> 反选:
<input type="button" id="b3" value="反选" />
<div id="div">
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
</div>
</body>
</html>
<script>
window.onload = function() {
var b1 = document.getElementById("b1")
var b2 = document.getElementById("b2")
var b3 = document.getElementById("b3")
var div = document.getElementById("div")
var inp = div.getElementsByTagName("input")
b1.onclick = function() {
for(a = 0; a < inp.length; a++) {
inp[a].checked = true;
}
}
b2.onclick = function() {
for(a = 0; a < inp.length; a++) {
inp[a].checked = false;
};
};
b3.onclick = function() {
for(a = 0; a < inp.length; a++) {
if(inp[a].checked == true) {
inp[a].checked = false;
} else {
inp[a].checked = true;
}
};
};
};
</script>