HTML单选框和复选框
写网页时,常常需要用到单/复选框,让我们来总结一下怎么实现单复选框功能吧。
定义
<input>
标签加上定义type属性即可生成单复选框。<input type="radio"> <!--这是单选框(圆形)--> <input type="checkbox"> <!--这是复选框(方形)-->
<label>
标签则常配合单复选框使用,表示该选项的内容。
有两种定义方法:<!--这种方法需要通过for来连接二者,所以<input>必须声明id--> <input type="radio" id="test"> <label for="test"> blabla </label>
<!--这种方法则不需要for,所以<input>也可以不声明id--> <label> <input type="radio"> blabla </label>
<form>
标签则可将同一道题的选项包起来,特别是对于单选框时尤为必要。<!--以下的两个单选框同属一个问题,所以两个框只能选中一个--> <form> <label> <input type="radio"> male </label> <label> <input type="radio"> female </label> </form>
<!--以下的四个单选框分属两个问题,所以可以同时选中不在同一个`<form>`中的两个选项--> <form> <label> <input type="radio"> tall </label> <label> <input type="radio"> short </label> </form> <form> <label> <input type="radio"> thin </label> <label> <input type="radio"> fat </label> </form>
checked
属性表示该选框是否被选中。
默认是未被选中的。若想初始化某个默认选项,则可以在标签中直接声明。
对于复选框,checked了哪些标签,那些就都会被选中;而对于单选框,checked了好几个标签,只有最后一个会被选中。<form> <div>Your gender is:</div> <label> <input type="radio" checked> male </label> <label> <input type="radio" checked> female </label> <!--最后会被选中的是female--> </form> <form> <div>Your hobby is:</div> <label> <input type="checkbox" checked> coding </label> <label> <input type="checkbox" checked> playing games </label> <label> <input type="checkbox" checked> reading </label> <!--最后三个选项都会被选中--> </form>
数据处理
- 选好的数据如何储存?可以将其当成变量来处理,比如给同一个问题下的
<input>
声明同一个name属性和不同的value属性,到时就可以通过name来获得元素并得到value值得知选了什么了。<form> <label> <input type="radio" name="sex" value="0"> male </label> <label> <input type="radio" name="sex" value="1"> female </label> </form>
- 如何调用选项数据?JavaScript解君愁。
大体思路是这样的:先通过Name属性开个变量(默认是数组)来获取元素,然后遍历一遍,checked属性为真则有被选,为假则无。
然后再讲一些细节:- let x = document.getElementsByName(Name); 记得Elements要用复数形式加s;
- x.length 返回的是x的长度,即该Name下有几个元素;
- x的第i+1个元素用 x[i] 来表示,i>=0;
- x[i].checked 是一个布尔值,真为被选了,假为没被选;
<form> <label> <input type="radio" name="sex" value="male"> male </label> <br> <label> <input type="radio" name="sex" value="female"> female </label> </form> <button id="submit"> submit </button> <P id="choice"></P> <script> let btn = document.getElementById("submit"); btn.addEventListener('click', function() { let x = document.getElementsByName("sex"); //记得Elements要用复数!!! for (let i = 0; i < x.length; i++) { if(x[i].checked) { document.getElementById('choice').textContent ='You chose ' + x[i].value + '.'; break; } } }); </script>
- 如何用js来手动选择某个选项?这是就需要搬出强大的jQuery了。
- 首先需要引入jQuery函数库:
<!--从CDN中载入。此方法需要联网--> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<!--直接调用其js文件。此方法需要事先下载好jQuery--> <script src="jquery-1.10.2.min.js"></script>
- 然后用js调用其中的prop函数:
其实还有很多调用方法,再此只介绍笔者最常用的,其余的可以查看相应手册。$('#ID').prop('checked', true); //将id为'ID'的标签选中 $('#ID1,#ID2').prop('checked', true); //将id为'ID1'和'ID2'的两个标签选中 $('input[name = NAME').prop('checked', true); //将name为'NAME'的所有`<input>`标签选中 //取消选中则将第二个参数设置成false
通过prop函数,就可以解决网页刷新时选项不重置的问题了。
附上配套的代码供君测试。<form> <p>Choose your hobby or hobbies:</p> <label> <input type="checkbox" name="hobby" value="coding" id="choice1"> coding </label> <br> <label> <input type="checkbox" name="hobby" value="reading" id="choice2"> reading </label> <br> <label> <input type="checkbox" name="hobby" value="playing" id="choice3"> playing </label> </form> <button id="submit"> submit </button> <p id="choice"></p> <script> let btn = document.getElementById("submit"); $("input[name = hobby]").prop('checked', false); btn.addEventListener('click', function() { let x = document.getElementsByName("hobby"); document.getElementById('choice').textContent ='You chose '; for (let i = 0; i < x.length; i++) { if(x[i].checked) { document.getElementById('choice').textContent += x[i].value + ', '; } } }); </script>
- 首先需要引入jQuery函数库: