通过js实现radio小组件，最终效果如下

html代码：

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <title>js实现radio功能</title>

  </head>

  <body>

    <script src="../js/jsRadio.js"></script>

    <script>

      var strs = [

      ]

      for (var i = 0; i < 50; i++) {

        var rId = "r"+i;

        var st2 = [

          { name: rId, value: "A" },

          { name: rId, value: "B",disabled:true },

          { name: rId, value: "C" }

        ];

        strs.push(st2)

      }

      createRadios(strs);

    </script>

  </body>

</html>

js代码：





function createRadios(data){


    for(var j = 0;j < strs.length;j++){


        var divStr = "<div id='" + (j+1) + "'>" + "题目" + j + " </div>"


        for(var i = 0;i<strs[j].length;i++){


            if(strs[j][i].disabled){


                divStr += strs[j][i].value+"<input type = 'radio' disabled name = '" + strs[j][i].name + "value='"+strs[j][i].value+"' />"


            }else{


                divStr += strs[j][i].value+"<input type = 'radio' name = '" + strs[j][i].name + "value='"+strs[j][i].value+"' />"


            }


        }


        divStr += "</div>"


        document.write(divStr)


      }


}








通过jQuery实现方式；


html代码：




<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>jQuery实现radio</title>

  </head>

  <body>

    <script src="../js/jquery-2.0.0.js"></script>

    <script src="../js/jQueryRadio.js"></script>

    <div id="app"></div>

    <script type="text/javascript">

      var strs = []

      for (var i = 0; i < 50; i++) {

        var rId = 'r' + i

        var st2 = [

          { name: rId, value: 'A' },

          { name: rId, value: 'B', disabled: true },

          { name: rId, value: 'C' }

        ]

        strs.push(st2)

      }

      $('#app').createRadio(strs)

    </script>

  </body>

</html>




js代码：




;(function ($) {

  $.fn.extend({

    createRadio: function (strs) {

      for (let i = 0; i < strs.length; i++) {

        var html = ''

        const str = strs[i]

        html = '<div>'

        html += '题目' + (i + 1) + '</div>'

        for (let j = 0; j < str.length; j++) {

          const st = str[j]

          html += st.value + "<input type='radio' name='" + st.name + "' value='" + st.value + "'>"

        }

        $(this).append(html)

      }

    }

  })

})(jQuery)




通过vue实现：


组件代码：




<template>

  <div>

    <div v-for="(str,index) in msgs" :key="index">

        <div>题目{{index+1}}

            <div v-for="(st,index) in str" :key="index">

                <div v-if="st.disabled == true">

                {{st.value}}<input type="radio" disabled :name="st.name" :value="st.value"/>

                </div>

                <div v-else>

                    <div v-if="st.value == defaultV">

                        {{st.value}}<input type="radio" :name="st.name" :value="st.value" checked/>

                    </div>

                    <div v-else>

                        {{st.value}}<input type="radio" :name="st.name" :value="st.value"/>

                    </div>

                </div>

            </div>

        </div>

    </div>

  </div>

</template>

<script>

export default {

  name: 'VueRadio',

  props: {

    msgs: Array,

    defaultV:String

  }

}

</script>




调用组件代码：




<template>

  <div id="app">

    <VueRadio :msgs="strs" :defaultV="defaultValue"/>

  </div>

</template>

<script>

import VueRadio from './components/VueRadio.vue'

export default {

  components: {

    VueRadio

  },

  data() {

      return {

          strs: [],

          defaultValue:"A"

      }

  },

  created() {

      var strsTemp = []

      for (var i = 0; i < 30; i++) {

        var rId = "r"+i;

        var st2 = [

          { name: rId, value: "A" },

          { name: rId, value: "B",disabled:true },

          { name: rId, value: "C" }

        ];

        strsTemp.push(st2)

      }

      this.strs = strsTemp;

  }

}

</script>




vue实现组件是进行了优化，添加了默认disabled和默认选中的值的实现
												


											
学习js、jquery、vue实现部分组件的更多相关文章
	

    
						
  1. js 实现vue—引入子组件props传参
		
    参考:https://www.cnblogs.com/xiaohuochai/p/7388866.html 效果 html <!DOCTYPE html> <html> < ...
    
		
    2. 
						
  2. 一丢丢学习之webpack4 + Vue单文件组件的应用
		
    之前刚学了一些Vue的皮毛于是写了一个本地播放器https://github.com/liwenchi123000/Local-Music-Player,如果觉得ok的朋友可以给个star. 就是很简 ...
    
		
    3. 
						
  3. Vue.Draggable：基于 Sortable.js 的 Vue 拖拽组件使用中遇到的问题
		
    Sortable.js 介绍 https://segmentfault.com/a/1190000008209715 项目中遇到的问题: A - 我需要在项目的拖拽组件中,使用背景 1 - 想到的第一 ...
    
		
    4. 
						
  4. [js]jQuery EasyUI的linkbutton组件disable方法无法禁用jQuery绑定事件的问题分析
		
    问题由来 linkbutton 是 jQuery EasyUI 中常用的一个控件,可以使用它创建按钮.用法很简单,使用 a 标签给一个easyui-linkbutton 的class就可以了. < ...
    
		
    5. 
						
  5. 用vue的抽象组件来做一个防止img标签url为空或url地址出错的验证
		
    看了网上文章学习了下vue的抽象组件,感觉就跟react的高阶组件一样的使用场景,只是更加面向vue的底层编程 ,网上介绍的抽象组件一般有2种用法,1 用来加防抖和节流 2 用来控制按钮是否允许点击做 ...
    
		
    6. 
								
  6. Vue.js 学习笔记之七：使用现有组件
		
    5.3 使用现有组件 在之前的五个实验中,我们所演示的基本都是如何构建自定义组件的方法,但在具体开发实践中,并非项目中所有的组件都是需要程序员们自己动手来创建的.毕竟在程序设计领域,"不要重 ...
    
		
    7. 
						
  7. day 83 Vue学习三之vue组件
		
    本节目录 一 什么是组件 二 v-model双向数据绑定 三 组件基础 四 父子组件传值 五 平行组件传值 六 xxx 七 xxx 八 xxx 一 什么是组件 首先给大家介绍一下组件(componen ...
    
		
    8. 
						
  8. vue学习笔记(九)vue-cli中的组件通信
		
    前言 在上一篇博客vue学习笔记(八)组件校验&通信中,我们学会了vue中组件的校验和父组件向子组件传递信息以及子组件通知父组件(父子组件通信),上一篇博客也提到那是对组件内容的刚刚开始,而本 ...
    
		
    9. 
						
  9. day  82  Vue学习三之vue组件
		
      Vue学习三之vue组件   本节目录 一 什么是组件 二 v-model双向数据绑定 三 组件基础 四 父子组件传值 五 平行组件传值 六 xxx 七 xxx 八 xxx 一 什么是组件 首先给 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. OSPF优化
			
    1.点对点(背靠背)的优化 两台设备直连(逻辑上的直连). 将OSPF宣告接口配置为点对点模式,不用选举DR.减少20S时间 interface Ethernet0/1 ip ospf network ...
    
			
    2. 
						
  2. python flask_sqlalchemy 多态 polymorphic 实现单表继承
			
    sqlalchemy 多态 polymorphic 实现单表继承 sqlaclchemy中的单表继续就是以一个模型类为基类,其他模型类继承基类,所有模型类的的数据都存一张表里面(也可以是多张,只不过基 ...
    
			
    3. 
						
  3. 狂神说SpringBoot11：Thymeleaf模板引擎
			
    狂神说SpringBoot系列连载课程,通俗易懂,基于SpringBoot2.2.5版本,欢迎各位狂粉转发关注学习. 微信公众号:狂神说(首发)    Bilibili:狂神说Java(视频) 未经作 ...
    
			
    4. 
						
  4. LA 3641 Leonardo的笔记本 & UVA 11077 排列统计
			
    LA 3641 Leonardo的笔记本 题目 给出26个大写字母的置换B,问是否存在要给置换A,使得 \(A^2 = B\) 分析 将A分解为几个循环,可以观察经过乘积运算得到\(A^2\)后,循环 ...
    
			
    5. 
						
  5. Luogu4168 蒲公英 （分块）
			
    题目传送门 题意 长度为n的序列,有m次询问,每次询问求\([l,r]\) 间的众数,如果有多个,输出最小的那个 \(n\le 4\times 10^4,m\le 5\times 10^5,a_i\l ...
    
			
    6. 
						
  6. ACDream手速赛2
			
    地址:http://acdream.info/onecontest/1014   都是来自Codeforce上简单题.   A. Boy or Girl 简单字符串处理   B. Walking in ...
    
			
    7. 
						
  7. 树链剖分（附带LCA和换根）——基于dfs序的树上优化
			
    .... 有点懒: 需要先理解几个概念: 1. LCA 2. 线段树(熟练,要不代码能调一天) 3. 图论的基本知识(dfs序的性质) 这大概就好了: 定义: 1.重儿子:一个点所连点树size最大的 ...
    
			
    8. 
						
  8. 【uva 10954】Add All（算法效率--Huffman编码+优先队列）
			
    题意:有N个数,每次选2个数合并为1个数,操作的开销就是这个新的数.直到只剩下1个数,问最小总开销. 解法:合并的操作可以转化为二叉树上的操作[建模],每次选两棵根树合并成一棵新树,新树的根权值等于两 ...
    
			
    9. 
						
  9. 【noi 2.6_9268】酒鬼（DP）
			
    题意:有N瓶酒,不能连续喝>=3瓶的酒,问能喝的最大的酒量. 解法:同前一题相似,可以f[i][j]表示前i瓶中连续喝了j瓶的最大酒量.1.f[i][0]=f[i-1][3] ; 2.i=1或2 ...
    
			
    10. 
						
  10. Splits CodeForces - 964A
			
    题意: 我们定义一个不上升的且和为 n 的正整数序列,叫做 n 的分解. 比如, 下面是8的分解: [4, 4], [3, 3, 2], [2, 2, 1, 1, 1, 1], [5, 2, 1].  ...
    
			
    11.