背景:
<input type="radio">,该标签表示的是单选按钮,这个类型相对于其他类型的获取,比较特殊,特此记录一下。
获取方式:
1. 使用选择器直接获取(注意选择器这种方式的使用);
1 <html> 2 <head> 3 <title>标题示例</title> 4 <meta charset="UTF-8"> 5 <style> 6 </style> 7 </head> 8 <body> 9 <form> 10 <p>Please select your preferred contact method:</p> 11 <div> 12 <input type="radio" id="contactChoice1" 13 name="contact" value="email"> 14 <label for="contactChoice1">Email</label> 15 16 <input type="radio" id="contactChoice2" 17 name="contact" value="phone"> 18 <label for="contactChoice2">Phone</label> 19 20 <input type="radio" id="contactChoice3" 21 name="contact" value="mail"> 22 <label for="contactChoice3">Mail</label> 23 </div> 24 <div> 25 <button type="button">Submit</button> 26 </div> 27 </form> 28 <script> 29 let ele = document.querySelector('button') 30 let form = document.querySelector('form') 31 ele.addEventListener('click', function () { 32 let x = form.querySelector("input[name='contact']:checked") 33 console.log(x.value) 34 }) 35 </script> 36 </body> 37 </html>
2. 使用FormData对象获取;
1 <html> 2 <head> 3 <title>标题示例</title> 4 <meta charset="UTF-8"> 5 <style> 6 </style> 7 </head> 8 <body> 9 <form> 10 <p>Please select your preferred contact method:</p> 11 <div> 12 <input type="radio" id="contactChoice1" 13 name="contact" value="email"> 14 <label for="contactChoice1">Email</label> 15 16 <input type="radio" id="contactChoice2" 17 name="contact" value="phone"> 18 <label for="contactChoice2">Phone</label> 19 20 <input type="radio" id="contactChoice3" 21 name="contact" value="mail"> 22 <label for="contactChoice3">Mail</label> 23 </div> 24 <div> 25 <button type="button">Submit</button> 26 </div> 27 </form> 28 <script> 29 let ele = document.querySelector('button') 30 let form = document.querySelector('form') 31 ele.addEventListener('click', function () { 32 var data = new FormData(form); 33 var output = ""; 34 for (const entry of data) { 35 output = entry[0] + "=" + entry[1] + "\r"; 36 }; 37 console.log(output) 38 }) 39 </script> 40 </body> 41 </html>
参考地址:
2. https://blog.csdn.net/qq_39822451/article/details/82753282