使用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>