通过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. netty写Echo Server & Client完整步骤教程（图文）
			
    1.创建Maven工程 1.1 父节点的pom.xml代码(root pom文件) 1 <?xml version="1.0" encoding="UTF-8&qu ...
    
			
    2. 
						
  2. Linux lsblk和df命令区别
			
    lsblk 查看的是block device,也就是逻辑磁盘大小. df查看的是file system, 也就是文件系统层的磁盘大小
    
			
    3. 
						
  3. 【Azure Redis 缓存】如何得知Azure Redis服务有更新行为？
			
    问题描述 Azure Redis作为微软云提供的一种PaaS服务,由于PaaS的特性,服务端的安装和维护.修补.升级等操作均由平台放负责.虽然最终用户只需要关注当前服务的使用,但是后台的升级和补丁行为 ...
    
			
    4. 
						
  4. 【poj 2752】Seek the Name, Seek the Fame（字符串--KMP）
			
    题意:给出一个字符串str,求出str中存在多少子串,使得这些子串既是str的前缀,又是str的后缀.从小到大依次输出这些子串的长度. 解法:利用KMP中next[ ]数组的性质,依次找到前缀.后缀匹 ...
    
			
    5. 
						
  5. HDU - 2825 Wireless Password  （AC自动机+状压DP）
			
    题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=2825 题意:给一些字符串,构造出长度为n的字符串,它至少包含k个所给字符串,求能构造出的个数. 题解: ...
    
			
    6. 
						
  6. Codeforces Round #577 (Div. 2)  C. Maximum Median  (模拟,中位数)
			
    题意:给你一个长度为奇数\(n\)的序列.你可以对任意元素加上\(k\)次\(1\),求操作后的中位数最大. 题解:先对序列进行排序,然后对中位数相加,如果中位数和后面的元素相等,就对后面所有和当前中 ...
    
			
    7. 
						
  7. python代理池的构建3——爬取代理ip
			
    上篇博客地址:python代理池的构建2--代理ip是否可用的处理和检查 一.基础爬虫模块(Base_spider.py) #-*-coding:utf-8-*- ''' 目标: 实现可以指定不同UR ...
    
			
    8. 
						
  8. DSC注册Agent失败- InternalServerError
			
    问题 有大概5台Agent Server,注册的时候,发现2台可以成功,其他的不成功. 注册失败的错误日志如下: 初步尝试 首先,Pull Server已经平稳的运行了几年了,此次注册还有部分Agen ...
    
			
    9. 
						
  9. .NET并发编程-函数闭包
			
    本系列学习在.NET中的并发并行编程模式,实战技巧 内容目录 函数式编程闭包的应用记忆化函数缓存 函数式编程 一个函数输出当做另一个函数输入.有时候一个复杂问题,我们拆分成很多个步骤函数,这些函数组合 ...
    
			
    10. 
						
  10. Eazfuscator.NET(.net混淆工具)
			
    软件功能 调试支持: 在你的程序集被Eazfuscator.NET混淆后,它不会成为不可调试混乱的砖块.你总是可以得到一个行号,出现未处理的异常,查看可读的堆栈跟踪,甚至附加调试器来遍历你的模糊代码. ...
    
			
    11.