1. Two Select Content Interchange
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<style>
#s1, #s2 {
width: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= "left"/>
<input type= "button" id= "B2" value= "right"/>
<input type= "button" id = "B3" value= "Select All"/>
<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>
<!--Select Interchange--
<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. radio button consent to click Next
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<body>
<input type= "Radio" id = "B1"/>
<input type= "button" id= "B2" value= "Next" disabled= "disabled"/>
</body>
<script>
radio button
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. Select All Box
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<body>
Select all: <input type= "button" Id= "B1" value= "Select All"/> Not selected:
<input type= "button" id= "B2" value= "All not selected"/> Inverse selection:
<input type= "button" id= "B3" value= "Reverse selection"/>
<div id= "div" >
<input type= "checkbox"/>
<input type= "checkbox"/>
<input type= "checkbox"/>
<input type= "checkbox"/>
<input type= "checkbox"/>
</div>
</body>
<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>
September 27, 2017 JS (1. Two Select Content Interchange 2. The radio button agrees to click Next 3. Select All box)