兼容IE的checkbox 样式表（支持全选、数据库提取数据、表单提交）

最新推荐文章于 2021-08-26 15:43:49 发布

李牧大将军

最新推荐文章于 2021-08-26 15:43:49 发布

阅读量685

点赞数 1

分类专栏：网上备份记忆回顾文章标签： html js php

记忆回顾同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

网上备份

8 篇文章 0 订阅

订阅专栏

<?
//header("cache-control:no-cache,must-revalidate");
header("Content-type: text/html; charset=utf-8");

?>
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/* page styles 页面样式可有可无 */

/* ----- Custom checkboxes, radios ----- */
/* wrapper divs 复选框与单选框样式 */
.custom-checkbox,.custom-radio{position:relative;}
</style>
<script type="text/javascript" src="config/jquery.min.js"></script>
<script type="text/javascript" >
jQuery.fn.customInput = function(){
return $(this).each(function(){
if($(this).is('[type=checkbox],[type=radio]')){
var input = $(this);

// 使用输入的ID得到相关的标签
var label = $('label[for='+input.attr('id')+']');

// 包裹在一个div输入+标签
input.add(label).wrapAll('<div class="custom-'+ input.attr('type') +'"></div>');

// 必要的浏览器不支持：hover伪类的标签
label.hover(
function(){ $(this).addClass('hover'); },
function(){ $(this).removeClass('hover'); }
);

//绑定自定义事件，触发它，绑定点击，焦点，模糊事件
input.bind('updateState', function(){
input.is(':checked') ? label.addClass('checked') : label.removeClass('checked checkedHover checkedFocus');
})
.trigger('updateState')
.click(function(){
$('input[id='+ $(this).attr('id') +']').trigger('updateState');
})
.focus(function(){
label.addClass('focus');
if(input.is(':checked')){ $(this).addClass('checkedFocus'); }
})
.blur(function(){ label.removeClass('focus checkedFocus'); });
}
});
};

$(function(){

$('.input').customInput();

});
</script>
<? include $_SERVER['DOCUMENT_ROOT']."/dist/inc_head.php";
include_once $_SERVER['DOCUMENT_ROOT']."/wx_app/comm/rdb_json.php"; ?>
</head>
<body>

<style type="text/css">
/* input, label positioning 该样式控制checkbox */
.custom-checkbox input{position:absolute;left:8px;top:15px;margin:0;}
.custom-checkbox label{display:block;position:relative;font-size:1.3em;padding-right:1em;line-height:1;padding:.5em 0 .5em 30px;margin:0 0 .3em;cursor:pointer;}
/* states */
.custom-checkbox label{background:url(config/images/checkbox1.png) no-repeat; background-position:-10px -14px}
.custom-radio label{background:url(config/images/radiobutton.gif) no-repeat;}
.custom-checkbox label,.custom-radio label{background-position:-10px -38px;}
.custom-checkbox label.hover,.custom-checkbox label.focus,.custom-radio label.hover,.custom-radio label.focus{background-position:-10px -138px}
.custom-checkbox label.checked,.custom-radio label.checked{background-position:-10px -238px;}
.custom-checkbox label.checkedHover,.custom-checkbox label.checkedFocus{background-position:-10px -338px;}
.custom-checkbox label.focus,.custom-radio label.focus{outline:1px dotted #ccc;}
</style>

<div class="content">
<div class="card">
<?
if(isset($_POST["action"])){
$arr=$_POST["action"];
for($i=0; $i < count($arr); $i++){
echo $arr[$i].",";
}

}

/*==============数据库提取数据=========*/

$q=" SELECT .................";
$sql_row=RunSQL($q);
if($sql_row->rcode!=0)die("error:".$sql_row->message);?>
<center>
<form action="#" method="post" >
<table cellpadding="0" cellspacing="0" border="0" id="table" width="80%">
<thead>
<tr height="66px"><th colspan="4" align="center"><h1>选择发货产品</h1></tr>
<tr>
<th align="center"><input type="checkbox" class="input" id="checkAll" name="checkAll" onClick="return chooseAll(this);" value=0 />
<label style="height:40px;" for="checkAll" >选择</label></th>
<th align="center">产品ID</th>
<th align="center">产品数量</th>
<th align="center">产品金额</th>
</tr>
</thead>

<tbody>
<? for($i=0;$i<$sql_row->cnt;$i++){
if($i%2==0)echo "<tr id='row1[]' style=\"background:#e4f2fb;\" οnmοuseοver=\"this.style.backgroundColor='#ccc';\" οnmοuseοut=\"this.style.backgroundColor='#e4f2fb';\" >";
else echo "<tr id='row2[]' style=\"background:#f8f8f8;\" οnmοuseοver=\"this.style.backgroundColor='#ccc';\" οnmοuseοut=\"this.style.backgroundColor='#f8f8f8';\" >";?>
<td >
<input type="checkbox" class="input" value="<?=$sql_row->data[$i]->PROD_ID?>" name="action[]" id="action<?=$i?>" />
<label style="height:40px;" name="sel[]" for="action<?=$i?>" ></label></td>
<td><?=$sql_row->data[$i]->PROD_ID?></td>
<td><?=round($sql_row->data[$i]->quan)?></td>
<td><?=round($sql_row->data[$i]->amt)?></td>

</tr>

<?
}
?>
</tbody>

</table>
<fieldset>
<input type="submit" name="submit" value="提交" />
</fieldset>
</form>

</center>

/*======全选或取消选择=========

for (var i=0; i<obj.length; i++) {

if(!obj[i].checked)

        obj[i].click();
}
}else{
for (var i=0; i<obj.length; i++) {
obj[i].click();
}
}
}
</script>
<?
include $_SERVER['DOCUMENT_ROOT']."/dist/inc_boot.php"; ?>
</div>

</div>
</body>

</html>

//======最后配上一些配置文件及图片的网址【 config】

李牧大将军

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
兼容IE的checkbox 样式表（支持全选、数据库提取数据、表单提交）

&lt;?//header("cache-control:no-cache,must-revalidate");header("Content-type: text/html; charset=utf-8");?&gt;&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;style type="text/css"&gt;/*
复制链接

扫一扫