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属性表示该选框是否被选中。
默认是未被选中的。若想初始化某个默认选项，则可以在标签中直接声明。

<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>

对于复选框，checked了哪些标签，那些就都会被选中；而对于单选框，checked了好几个标签，只有最后一个会被选中。

数据处理

选好的数据如何储存？可以将其当成变量来处理，比如给同一个问题下的<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>

posted @ 2020-05-30 20:36 ttjibu 阅读(3363) 评论(0) 收藏举报

刷新页面返回顶部

ttjb

HTML单选框和复选框

定义

数据处理

公告