1. 程式人生 > >使用js的方式讓複選框單個選中(layui形式的checked)

使用js的方式讓複選框單個選中(layui形式的checked)

一、標籤部分

<script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>

<div class="layui-unselect layui-form-checkbox selInfo " lay-skin="primary" id="30" onclick="synFile(this);"><i class="layui-icon"></i></div>

二、js部分

方法一:

<script>

var a=0;

function synFile (syso) {

a=a+1;

var i =  syso.getElementsByTagName("i")[0];
            var data = syso.getAttribute('data');
            alert(data);
            //i.className += ' selectCss';
            if(a%2==1){
                lookColor(i);
            }else{
                disColor(i);
            }

}

      //顯示
      function lookColor(i){
            i.style.borderColor="#5FB878";
            i.style.backgroundColor="#5FB878";
            i.style.color="#fff";
            return;
      }
      //消失
      function disColor(i){
            i.style.borderColor="";
            i.style.backgroundColor="";
            i.style.color="";
            return;
      }

</script>

方法二:

<script>

var a=0;

function synFile (syso) {

    a=a+1;

    if(a%2==1){
            syso.className += ' header';
            syso.className += ' layui-form-checked';
        }else{
            removeClass(syso,"header");
            removeClass(syso,"layui-form-checked");
        }

}

//刪除class
    function removeClass( elements,cName ){  
        if( hasClass( elements,cName ) ){  
            elements.className = elements.className.replace( new RegExp( "(\\s|^)" + cName + "(\\s|$)" )," " ); // replace方法是替換  
        };  
    };
    //判斷元素是否有某個class
    function hasClass( elements,cName ){  
        return !!elements.className.match( new RegExp( "(\\s|^)" + cName + "(\\s|$)") ); // ( \\s|^ ) 判斷前面是否有空格 (\\s | $ )判斷後面是否有空格 兩個感嘆號為轉換為布林值 以方便做判斷  
    };

</script>