通过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. PA防火墙抓包结果显示重传（re-transmission）
			
    问题起因: 部分内网服务器调用外网站点抓取图片时出现缓慢及超时现象. 由于是由内向外方向的访问,且通过的应用层设备只有防火墙:而且用其他网段测试机测试的时候发现并没有上述访问缓慢或超时. 从防火墙抓包 ...
    
			
    2. 
						
  2. Java泛型学习---第二篇
			
    泛型学习第一篇 1.泛型之擦拭法 泛型是一种类似"模板代码"的技术,不同语言的泛型实现方式不一定相同. Java语言的泛型实现方式是擦拭法(Type Erasure). 所谓擦拭法 ...
    
			
    3. 
						
  3. 一篇文章图文并茂地带你轻松学完 JavaScript 事件循环机制(event loop)
			
    JavaScript 事件循环机制 (event loop) 本篇文章已经默认你有了基础的 ES6 和 javascript语法 知识. 本篇文章比较细致,如果已经对同步异步,单线程等概念比较熟悉的读 ...
    
			
    4. 
						
  4. js实现encodeHTML和decodeHTML
			
    HTML编解码说明/在线HTML编解码 encodeHTMl const encodeHTML = (html: string): string => { const div = documen ...
    
			
    5. 
						
  5. KMP:补齐循环节
			
    首先要明白:如果一个串需要至少添加x(x>=0)个字符才能是有>=2个循环节的串,那么我可以只在串末尾添加,不需要去串头添加.(比如串cabc,循环节是abc,我可以在尾部添加ab即可.) ...
    
			
    6. 
						
  6. 2019牛客暑期多校训练营（第一场）A - Equivalent Prefixes（单调栈）
			
    题意 给定两个$n$个元素的数组$a,b$,它们的前$p$个元素构成的数组是"等价"的,求$p$的最大值."等价"的意思是在其任意一个子区间内的最小值相同. $ ...
    
			
    7. 
						
  7. Jenkins+ant+Jmeter接口自动化框架搭建
			
    工具准备 JDK: jdk1.8.0_111 Ant: apache-ant-1.9.9 Jmeter: apache-jmeter-3.1 Jenkins: jenkins-2.7.4 JDK安装  ...
    
			
    8. 
						
  8. Kibana 地标图可视化
			
    ElasticSearch 可以使用 ingest-geoip 插件可以在 Kibana 上对 IP 进行地理位置分析, 这个插件需要 Maxmind 的 GeoLite2 City,GeoLite2 ...
    
			
    9. 
						
  9. POJ 2288 Islands and Bridges（状压DP）题解
			
    题意:n个点,m有向边,w[i]表示i的价值,求价值最大的哈密顿图(只经过所有点一次).价值为:所有点的w之和,加上,每条边的价值 = w[i] * w[j],加上,如果连续的三个点相互连接的价值 = ...
    
			
    10. 
						
  10. CodeForces 348D Turtles（LGV定理）题解
			
    题意:两只乌龟从1 1走到n m,只能走没有'#'的位置,问你两只乌龟走的时候不见面的路径走法有几种 思路:LGV定理模板.但是定理中只能从n个不同起点走向n个不同终点,那么需要转化.显然必有一只从1 ...
    
			
    11.