通过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. mysql-mysqli_fetch_all（错误）
			
    mysql-mysqli_fetch_all(错误) 问题:使用mysql-mysqli_fetch_all获取返回的数组时失败/报错 原因及解决方法: mysqli_fetch_all函数只存在于m ...
    
			
    2. 
						
  2. .Net微服务实战之必须得面对的分布式问题
			
    系列文章 .Net微服务实战之技术选型篇 .Net微服务实战之技术架构分层篇 .Net微服务实战之DevOps篇 .Net微服务实战之负载均衡(上) .Net微服务实战之CI/CD .Net微服务实战 ...
    
			
    3. 
						
  3. Hive调优相关
			
    前言 Hive是由Facebook 开源用于解决海量结构化日志的数据统计,是基于Hadoop 的一个数据仓库工具,可以将结构化的数据文件映射为一张表,并提供类 SQL查询功能. 在资源有限的情况下,提 ...
    
			
    4. 
						
  4. 为什么对gRPC做负载均衡会很棘手？
			
    在过去的几年中,随着微服务的增长,gRPC在这些较小的服务之间的相互通信中获得了很大的普及,在后台,gRPC使用http/2在同一连接和双工流中复用许多请求. 使用具有结构化数据的快速,轻便的二进制协 ...
    
			
    5. 
						
  5. Codeforces Round #668 (Div. 2)【ABCD】
			
    比赛链接:https://codeforces.com/contest/1405 A. Permutation Forgery 题意 给出一个大小为 $n$ 的排列 $p$,定义 \begin{equ ...
    
			
    6. 
						
  6. Codeforces Round #659 (Div. 2) A. Common Prefixes
			
    题目链接:https://codeforces.com/contest/1384/problem/A 题意 构造 $n+1$ 个字符串,使得 $n$ 对相邻字符串的相同前缀长度对应于数组 $a$ .  ...
    
			
    7. 
						
  7. 用servlet在网页中打印字符串(初接触)、servlet调用过程
			
    一.servlet是什么: 二.在官方文档中点servlet 这就是servlet的方法,这里说一下什么叫生命周期的方法(life-cycle methods):就是这个对象一旦创生之后一定会执行的方 ...
    
			
    8. 
						
  8. Tomacat目录以及服务器配置文件信息
			
    一. 1.Tomacat的启动: 在我的windows10中我下载的是8.5版本的tomacat,我就是通过".sh"文件来打开和关闭tomacat 要打开.sh文件还需要 这个G ...
    
			
    9. 
						
  9. Java_web-response的outputStream和Write输出数据的问题
			
    解决方法: 把方法换成这个也可以: 因为浏览器也是一个html解析工具,所以认识html文本 下面这个直接write(1),那么浏览器上就会显示L 这个样子在浏览器上看到的就是1: 字节流输出: 这个 ...
    
			
    10. 
						
  10. WSL2 使用Docker运行.NET Core
			
    Docker的安装在前面说过了,此处就不说了,我们检查一下版本: 步入正题. 首先,我们为项目创建Dockerfile(无扩展名) 确保Docker是启动状态: 构建镜像,注意名称必须是全部小写(此处 ...
    
			
    11.