精华内容
下载资源
问答
  • function sele(){if(document.getElementById("agreement").checked==false) //判断单选框此时状态为未选agreement为单选框id{document.getElementById("button_disabled").style.display="inline"; //显示不可用...

    function sele(){

    if(document.getElementById("agreement").checked==false) //判断单选框此时状态为未选agreement为单选框id

    {

    document.getElementById("button_disabled").style.display="inline"; //显示不可用按钮

    document.getElementById("button_enabled").style.display="none"; //隐藏不可用按钮

    }

    else //判断单选框此时状态为已选

    {

    document.getElementById("button_disabled").style.display="none";

    document.getElementById("button_enabled").style.display="inline";

    }

    }

    //用onchange触发事件

    展开全文
  • 本文实例为大家分享了JS面向对象之单选框实现代码,供大家参考,具体内容如下描述:JS面向对象——单选框的实现效果:实现:Utile.js(function () {Object.prototype.addProto=function (sourceObj) {var names=...

    本文实例为大家分享了JS面向对象之单选框实现代码,供大家参考,具体内容如下

    描述:

    JS面向对象——单选框的实现

    效果:

    6d6f24aaa6d30563b4bcb415ba03813c.png

    实现:

    Utile.js

    (function () {

    Object.prototype.addProto=function (sourceObj) {

    var names=Object.getOwnPropertyNames(sourceObj);

    for(var i=0;i

    var desc=Object.getOwnPropertyDescriptor(sourceObj,names[i]);

    if(typeof desc.value==="object" && desc.value!==null){

    var obj=new desc.value.constructor();

    obj.addProto(desc.value);//把obj当成引用对象带入递归函数继续给obj赋值

    Object.defineProperty(this,names[i],{

    enumerable:desc.enumerable,

    writable:desc.writable,

    configurable:desc.configurable,

    value:obj

    });

    continue;

    }

    Object.defineProperty(this,names[i],desc);

    }

    return this;

    };

    Function.prototype.extendClass=function (supClass) {

    function F() {}

    F.prototype=supClass.prototype;

    this.prototype=new F();

    this.prototype.constructor=this;

    this.supClass=supClass.prototype;

    if(supClass.prototype.constructor===Object.prototype.constructor){

    supClass.prototype.constructor=supClass;

    }

    }

    })();

    var RES=(function () {

    var list={};

    return {

    DATA_FINISH_EVENT:"data_finish_event",

    init:function (imgDataList,basePath,type) {

    if(imgDataList.length===0) return;

    if(!type) type="json";

    RES.imgDataList=imgDataList.reverse();

    RES.basePath=basePath;

    RES.type=type;

    RES.ajax(basePath+imgDataList.pop()+"."+type)

    },

    ajax:function (path) {

    var xhr=new XMLHttpRequest();

    xhr.addEventListener("load",RES.loadHandler);

    xhr.open("GET",path);

    xhr.send();

    },

    loadHandler:function (e) {

    this.removeEventListener("load",RES.loadHandler);

    var key,obj;

    if(RES.type==="json"){

    obj=JSON.parse(this.response);

    key=obj.meta.image.split(".png")[0];

    list[key]=obj.frames;

    }else if(RES.type==="xml"){

    obj=this.responseXML.children[0];

    key=obj.getAttribute("imagePath").split(".png")[0];

    list[key]=obj;

    }

    if(RES.imgDataList.length===0){

    var evt=new Event(RES.DATA_FINISH_EVENT);

    evt.list=list;

    document.dispatchEvent(evt);

    // Model.instance.menuData=list;

    return;

    }

    RES.ajax(RES.basePath+RES.imgDataList.pop()+"."+RES.type);

    },

    getNameJSONData:function (name) {

    var fileName=RES.basePath;

    for(var key in list){

    var arr=list[key].filter(function (t) {

    return t.filename===name;

    });

    if(arr.length>0){

    fileName+=key+".png";

    break;

    }

    }

    if(arr.length===0){

    return false;

    }else{

    return {

    file:fileName,

    w:arr[0].frame.w,

    h:arr[0].frame.h,

    x:arr[0].frame.x,

    y:arr[0].frame.y

    };

    }

    },

    getNameXMLData:function (name) {

    var fileName=RES.basePath;

    for(var key in list){

    var elem=list[key].querySelector("[n="+name+"]");

    if(elem){

    fileName+=list[key].getAttribute("imagePath");

    break;

    }

    }

    if(!elem) return false;

    return {

    file:fileName,

    w:elem.getAttribute("w"),

    h:elem.getAttribute("h"),

    x:elem.getAttribute("x"),

    y:elem.getAttribute("y")

    }

    },

    getImage:function (name) {

    var obj;

    if(RES.type==="json"){

    obj=RES.getNameJSONData(name);

    }else if(RES.type==="xml"){

    obj=RES.getNameXMLData(name)

    }

    if(!obj)return;

    var div=document.createElement("div");

    Object.assign(div.style,{

    width:obj.w+"px",

    height:obj.h+"px",

    backgroundImage:"url("+obj.file+")",

    backgroundPositionX:-obj.x+"px",

    backgroundPositionY:-obj.y+"px",

    position:"absolute"

    });

    return div;

    },

    changeImg:function (elem,name) {

    var obj;

    if(RES.type==="json"){

    obj=RES.getNameJSONData(name);

    }else if(RES.type==="xml"){

    obj=RES.getNameXMLData(name)

    }

    if(!obj)return;

    Object.assign(elem.style,{

    width:obj.w+"px",

    height:obj.h+"px",

    backgroundImage:"url("+obj.file+")",

    backgroundPositionX:-obj.x+"px",

    backgroundPositionY:-obj.y+"px",

    position:"absolute"

    });

    }

    }

    })();

    UIComponent.js

    var CheckBox=(function () {

    function CheckBox(parent) {

    this.checkView=this.init(parent);

    }

    /*

    //ES5 单例

    CheckBox.getInstance=function () {

    if(!CheckBox._instance){

    CheckBox._instance=new CheckBox();

    }

    return CheckBox._instance;

    };*/

    CheckBox.prototype.addProto({

    _label:"",

    _checked:false,

    init:function (parent) {

    if(this.checkView) return this.checkView;

    var div=document.createElement("div");

    var icon=RES.getImage("f-checkbox");

    div.appendChild(icon);

    var label=document.createElement("span");

    div.style.position=icon.style.position=label.style.position="relative";

    icon.style.float=label.style.float="left";

    label.textContent="";

    Object.assign(label.style,{

    fontSize:"16px",

    lineHeight:"20px",

    marginLeft:"5px",

    marginRight:"10px"

    });

    var h=RES.getNameXMLData("f-checkbox").h;

    icon.style.top=(20-h)/2+"px";

    div.appendChild(label);

    parent.appendChild(div);

    this.clickHandlerBind=this.clickHandler.bind(this);

    div.addEventListener("click",this.clickHandlerBind);

    return div;

    },

    clickHandler:function (e) {

    this.checked=!this.checked;

    },

    set label(value){

    this._label=value;

    this.checkView.lastElementChild.textContent=value;

    },

    get label(){

    return this._label;

    },

    set checked(value){

    if(this._checked===value)return;

    this._checked=value;

    if(value){

    RES.changeImg(this.checkView.firstElementChild,"f-checkbox-active");

    }else{

    RES.changeImg(this.checkView.firstElementChild,"f-checkbox");

    }

    this.checkView.firstElementChild.style.position="relative";

    this.dispatchMessage(value);

    },

    dispatchMessage:function (value) {

    var evt=new Event("change");

    evt.checked=value;

    evt.elem=this;

    document.dispatchEvent(evt);

    },

    get checked(){

    return this._checked;

    }

    });

    return CheckBox;

    })();

    var Radio=(function () {

    function Radio(parent,groupName) {

    this.constructor.supClass.constructor.call(this,parent);

    this.groupName=groupName;

    this.checkView.self=this;

    this.checkView.setAttribute("groupName",groupName);

    }

    Radio.extendClass(CheckBox);

    Radio.prototype.addProto({

    clickHandler:function (e) {

    // console.log(Model.instance.menuData);

    if(this.checked)return;

    var list=document.querySelectorAll("[groupName="+this.groupName+"]");

    for(var i=0;i

    list[i].self.checked=false;

    }

    this.checked=true;

    },

    dispatchMessage:function (value) {

    if(!value)return;

    this.constructor.supClass.dispatchMessage.call(this,value);

    }

    });

    return Radio;

    })();

    html

    Title

    document.addEventListener(RES.DATA_FINISH_EVENT,init);

    RES.init(["new_icon"],"img/","xml");

    var arr=["北京","上海","广州","深圳","成都"];

    function init() {

    document.addEventListener("change",changeHandler);

    var elem=document.createDocumentFragment();

    for(var i=0;i

    var radio=new Radio(elem);

    radio.label=arr[i];

    if(i===0){

    radio.checked=true;

    }

    }

    document.body.appendChild(elem);

    }

    function changeHandler(e) {

    console.log(e);

    }

    Model.instance.elem.addEventListener("chi",chiHandler);

    Model.instance.elem.dispatchEvent(new Event("chi"));

    function chiHandler(e) {

    console.log(e)

    }

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

    展开全文
  • js单选框、复选框练习 mischen function getRadioValue(){ var radioGroup=document.forms[0].r; var selected=null; for(var i=0;i;i

    js单选框、复选框练习


    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>mischen</title>
        <script Language="JavaScript">
            function getRadioValue(){
                var radioGroup=document.forms[0].r;
                var selected=null;
                for(var i=0;i<radioGroup.length;i++){
                    if(radioGroup[i].checked){
                        selected=radioGroup[i];
                        alert(selected.value);
                        break;
                    }
                }
            }
            function getCheckboxValue(){
                var group=document.form1.hobby;
                var a1=new Array();
                var j=0;
                for(var i=0;i<group.length;i++){
                    if(group[i].checked){
                        alert(group[i].value);
                        a1[j]=group[i].value;
                        j++;
                    }
                }
    
            }
        </script>
    </head>
    <body>
       <form name="from1">
             <input type="radio" name="r" value="1">奥迪</input>
             <input type="radio" name="r" value="2">宝马</input>
             <input type="radio" name="r" value="3">奔驰</input><br>
              驾驶技术:<br>
           <input type="checkbox" name="hobby" value="1">开车</input><br>
           <input type="checkbox" name="hobby" value="2">开飞机</input><br>
           <input type="checkbox" name="hobby" value="3">开坦克</input><br>
           <input type="checkbox" name="hobby" value="4">开轮船</input><br>
    
           <input type="button" οnclick="getRadioValue();" value="选择汽车"/><br>
           <input type="button" οnclick="getCheckboxValue();" value="选择驾驶技术"/><br>
         </form>
    </body>
    </html>


    展开全文
  • js单选框选中

    2020-12-23 14:54:30
    $('#id').prop('checked','checked');
     $('#id').prop('checked','checked');
    
    展开全文
  • js 单选框点击选中和取消

    千次阅读 2018-04-24 13:50:50
    首先是html代码,一个单选框 一个 隐藏域,便于给后台传递数据. &lt;input type="checkbox" calss="span4" name="randomPassword" id="randomPassword" value="...
  • 原生JS单选框二选一

    2021-01-31 19:25:52
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">... .labelstyle {
  • js 单选框 radio

    2010-09-25 17:29:43
    单选框书写注意:type和name属性必写,其他属性可根据需要填写,但是name的值必须相同,否则不可用 例如: 男 女 正确 男 女 错误 ...
  • input[type=checkbox], input[type=radio] { opacity: 0; }
  • 现在想写一个radio框的级联。...就是一共有5层,1决定2的内容,2决定3的内容,3决定4的内容,这5层都是单选框。 请问大神,是否有类似于cxselect那种的插件,或者有类似的代码,给我参考一下,感激不尽!
  • 代码如下: function check() { if (document.getElementById("psd").value != document.getElementById("psd1").value) { ... } else { document.getElementById("warning").innerHTML = " ";...
  • js单选框选中后如何取消选中

    千次阅读 2016-08-09 14:22:55
    测试
  • &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt; &lt;html&gt; &lt;head&gt; ... charset=u
  • 单选框 radio&lt;div class="radio-inline"&gt; &lt;input type="radio" name="killOrder" value="1"/&gt; &lt;label for="killOrder1"&...
  • 判断一个单选框是否被选中 if($('input[id=JqloixcMtbvagZwb0P]').eq(i).is(":checked")){ console.log(...通过js动态选中单选框 $('input[id='+data[2][k].user_power+']').eq(o).prop("checked",true);
  • 本篇文章主要介绍了vue.js实现单选框、复选框和下拉框示例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 获取单选框框值的方法 function getRadioRes(Name){ var rdsObj = document.getElementsByName(Name); var checkVal = null; for(i = 0; i < rdsObj.length; i++){ if(rdsObj[i].checked){che...
  • js 多选框&单选框

    2020-02-23 22:57:34
    此多选框、单选框可以换按钮皮肤,只更改雪碧图的定位即可。 没有使用自带的控件,是重新写的。 用到了模块化开发,类的导出导入,类的继承。 <!-- html部分 --> <script type="module"> import Radio ...
  • js获取单选框的值

    2018-11-02 15:38:00
    js获取单选框的值 var lx= $("input[name='lx']:checked").val(); $("input[name='status']")[1].checked=true; 转载于:https://www.cnblogs.com/qq376324789/p/9896579.html
  • js下获得单选框的值的代码
  • js使用li或者div来模拟input的复选框和单选框样式,7行代码,兼容好
  • 在实际应用中,偶尔会用到复选checkbox的值,那么如何获取它的值呢?本文接下来会介绍使用js获取复选值,需要的朋友可以了解下
  • vue.js实现单选框和复选框

    千次阅读 2019-12-17 17:38:58
    vue.js可以使用v-model指令在...一、单选框 在传统的HTML中实现单选框的代码如下: <div> <p>性别:</p> <input type="radio" name="first" value="man"> <label for="man">男<...
  • 本文实例为大家分享了JS面向对象之单选框实现代码,供大家参考,具体内容如下 描述: JS面向对象——单选框的实现 效果: 实现: Utile.js (function () { Object.prototype.addProto=function (sourceObj) { ...
  • js设置单选框为选中状态

    千次阅读 2020-05-19 15:16:30
    js设置单选框为选中状态 HTML部分 <input type="radio" value="1" name="onlinestatus" /> <input type="radio" value="2" name="onlinestatus" /> js部分 $("[name='onlinestatus']").get(0).checked ...
  • js遍历单选框和多选框必填选项 var dx15=KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲15 .weui-cells_…(’#15 .weui-cells__title’).get(0).getAttribute(‘data-id’)-1 //获取第一题第一个...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,452
精华内容 580
关键字:

js单选框