html单选框和复选框

标签：js调用   初始化   默认   查看   min   query   连接   测试   jquer   

写网页时，常常需要用到单/复选框，让我们来总结一下怎么实现单复选框功能吧。

定义

1. 标签加上定义type属性即可生成单复选框。

2. 标签则常配合单复选框使用，表示该选项的内容。
   有两种定义方法：

   
    blabla 
   

   
     blabla 
   

3. 标签则可将同一道题的选项包起来，特别是对于单选框时尤为必要。

   
   
         male 
         female 
   
   

   
   
        tall 
         short 
   
   
         thin 
         fat 
   
   

4. checked属性表示该选框是否被选中。
   默认是未被选中的。若想初始化某个默认选项，则可以在标签中直接声明。

   
       
   Your gender is:
         male 
         female 
         
   
   
       
   Your hobby is:
         coding 
         playing games 
         reading 
       
   
   

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

数据处理

1. 选好的数据如何储存？可以将其当成变量来处理，比如给同一个问题下的声明同一个name属性和不同的value属性，到时就可以通过name来获得元素并得到value值得知选了什么了。

   
         male 
         female 
   
   

2. 如何调用选项数据？JavaScript解君愁。
   大体思路是这样的：先通过Name属性开个变量(默认是数组)来获取元素，然后遍历一遍，checked属性为真则有被选，为假则无。
   然后再讲一些细节：
   • let x = document.getElementsByName(Name)； 记得Elements要用复数形式加s;
   • x.length 返回的是x的长度，即该Name下有几个元素;
   • x的第i+1个元素用 x[i] 来表示，i>=0;
   • x[i].checked 是一个布尔值，真为被选了，假为没被选;

   
     male   
     female 
   
    submit 
   
   
   

3. 如何用js来手动选择某个选项？这是就需要搬出强大的jQuery了。
   • 首先需要引入jQuery函数库：

   • 然后用js调用其中的prop函数：

     $(‘#ID‘).prop(‘checked‘, true);  //将id为‘ID‘的标签选中
     $(‘#ID1,#ID2‘).prop(‘checked‘, true);  //将id为‘ID1‘和‘ID2‘的两个标签选中
     $(‘input[name = NAME‘).prop(‘checked‘, true);  //将name为‘NAME‘的所有``标签选中
     //取消选中则将第二个参数设置成false
     

     其实还有很多调用方法，再此只介绍笔者最常用的，其余的可以查看相应手册。
     通过prop函数，就可以解决网页刷新时选项不重置的问题了。
     附上配套的代码供君测试。

     
         
     Choose your hobby or hobbies:
           coding 	
       reading  
       playing 
     
      submit 
     
     
     

html单选框和复选框

标签：js调用   初始化   默认   查看   min   query   连接   测试   jquer   

原文地址：https://www.cnblogs.com/ttjibu/p/12942994.html