通过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. 调用个别f5 负载端口为80的vs时，返回值为空的问题
			
    现状: vs负载端口为80并添加XFF,pool包含2个member,member的monitor端口为80&9000. 故障现象: 应用同事描述说再完全复制了一个member并添加到pool ...
    
			
    2. 
						
  2. 最小生成树-Prim&Kruskal
			
    Prim算法 算法步骤 S:当前已经在联通块中的所有点的集合 1. dist[i] = inf 2. for n 次 t<-S外离S最近的点 利用t更新S外点到S的距离 st[t] = true ...
    
			
    3. 
						
  3. SOLID：面向对象设计的五个基本原则
			
    在程序设计领域,SOLID 是由罗伯特·C·马丁在 21 世纪早期引入的记忆术首字母缩略字,指代了面向对象编程和面向对象设计的五个基本原则.当这些原则被一起应用时,它们使得一个程序员开发一个容易进行软 ...
    
			
    4. 
						
  4. KMP:补齐循环节
			
    首先要明白:如果一个串需要至少添加x(x>=0)个字符才能是有>=2个循环节的串,那么我可以只在串末尾添加,不需要去串头添加.(比如串cabc,循环节是abc,我可以在尾部添加ab即可.) ...
    
			
    5. 
						
  5. HDU - 2328 Corporate Identity（kmp+暴力）
			
    传送门:http://acm.hdu.edu.cn/showproblem.php?pid=2328 题意:多组输入,n==0结束.给出n个字符串,求最长公共子串,长度相等则求字典序最小. 题解:(居 ...
    
			
    6. 
						
  6. A - Promotions
			
    题目详见http://7xjob4.com1.z0.glb.clouddn.com/3f644de6844d64706eb36baa3a0c27b0 这题是普通的拓扑排序,要把每一层的都保存下来. # ...
    
			
    7. 
						
  7. Codeforces Round #529 (Div. 3)   D. Circular Dance   (思维)
			
    题意:有\(n\)个熊小孩,绕着树转圈圈,编号\(i\)的小孩可以记住\(a_{i,1}\)和\(a_{i,2}\)两个小孩,这两个小孩是顺时针相邻的,但谁前谁后不一定.现在给你每个小孩的\(a_{i ...
    
			
    8. 
						
  8. PowerShell随笔9--- call
			
    很多时候我们需要在一个脚本文件执行另外一个脚本文件,比如我们有一个Test.ps1文件 我们有以下2种方法: Invoke-Expression (&) 我们可以看到,Test.ps1中的代码 ...
    
			
    9. 
						
  9. Python进阶丨如何创建你的第一个Python元类？
			
    摘要:通过本文,将深入讨论Python元类,其属性,如何以及何时在Python中使用元类. Python元类设置类的行为和规则.元类有助于修改类的实例,并且相当复杂,是Python编程的高级功能之一. ...
    
			
    10. 
						
  10. Scanner用户交互
			
    Scanner用户交互 Scanner对象 引入语法: Scanner scanner=new Scanner(System.in);(固定的) 小写scanner为定义的名称 scanner.clo ...
    
			
    11.