You can use the querySelectorAll() method to select all the elements of the HTML document.
Create a WebPage, named querySelectorAll.html
<!doctype html>
<head>
<title>Working With querySelectorAll() method</title>
</head>
<body>
<h1>The querySelectorAll Method</h1>
<FORM id="myform">
<b>Select your favourite cars:</b><br>
<INPUT name="cars" type="checkbox" value="Ferrari">Ferrari<br>
<INPUT name="cars" type="checkbox" value="Audi">Audi<br>
<INPUT name="cars" type="checkbox" value="BMW">BMW<br>
<INPUT name="cars" type="checkbox" value="fortuner ">fortuner<br>
<br>
<INPUT type="submit">
</FORM>
<SCRIPT type="text/javascript">
if(document.querySelector){
document.querySelector('#myform').onsubmit=function(){
var checkcars=this.querySelectorAll('input[name="cars"]:checked')
document.write("<b> you have selected the following cars:
</b><br>")
for(var i=0;i<checkcars.lenght;i++){
var value="" value+=checkcars[i].value+"<br>"
document.write("<li>"+value+"<li>")
}
return false
}
}</SCRIPT>
</body>
</html>
Browser View:
Create a WebPage, named querySelectorAll.html
<!doctype html>
<head>
<title>Working With querySelectorAll() method</title>
</head>
<body>
<h1>The querySelectorAll Method</h1>
<FORM id="myform">
<b>Select your favourite cars:</b><br>
<INPUT name="cars" type="checkbox" value="Ferrari">Ferrari<br>
<INPUT name="cars" type="checkbox" value="Audi">Audi<br>
<INPUT name="cars" type="checkbox" value="BMW">BMW<br>
<INPUT name="cars" type="checkbox" value="fortuner ">fortuner<br>
<br>
<INPUT type="submit">
</FORM>
<SCRIPT type="text/javascript">
if(document.querySelector){
document.querySelector('#myform').onsubmit=function(){
var checkcars=this.querySelectorAll('input[name="cars"]:checked')
document.write("<b> you have selected the following cars:
</b><br>")
for(var i=0;i<checkcars.lenght;i++){
var value="" value+=checkcars[i].value+"<br>"
document.write("<li>"+value+"<li>")
}
return false
}
}</SCRIPT>
</body>
</html>
Browser View:
No comments:
Post a Comment