zoukankan      html  css  js  c++  java
  • 复选框全选

    复选框

    <p class="copy_td"><input type="checkbox" class="input_check" id="checkbox11"><label for="checkbox11"></label></p>

    p {position: relative;}

    p .input_check {position: absolute;visibility: hidden; }

    p .input_check+label {display: inline-block;position: absolute;top: -10px;background: url(../images/checkboxno.png) left center no-repeat;80px; height: 16px; background-size: 16px; visibility: visible;}
    p .input_check:checked+label:after {content: "";position: absolute;left: 0px;background: url(../images/checkboxyes.png) left center no-repeat;80px; height: 16px;line-height: 16px; background-size: 16px;}

    var th =$(".copy_th input.input_check");

    var td =$(".copy_td input.input_check");
    th.click(function(){
    if (th.is(":checked") == false) {
    td.prop("checked",false);
    } else {
    td.prop("checked",true);
    }
    })
    td.click(function(){
    var tdlength=$(".copy_td input.input_check[type='checkbox']").length;
    var tdchecked=$(".copy_td input.input_check[type='checkbox']:checked").length;
    if (tdchecked == tdlength) {
    th.prop("checked",true);
    } else {
    th.prop("checked",false);
    }
    })

    单选框样式

    <i><input type="radio" class="input_radio" name="crowd_fund_radio" id="radio1" value="1" checked=""><label for="radio1">单选框</label></i>

    .input_radio {position: absolute; 20px;height: 20px;visibility: hidden;}
    .input_radio+label {display: inline-block; 120px;height: 20px;text-indent:18px;line-height:18px;color: #666666;background: url(../images/radio_no.png) left center no-repeat; float: left; margin:5px 10px 0px 10px;}
    .input_radio:checked+label {background: url(../images/radio_yes.png) left center no-repeat;}

  • 相关阅读:
    jcaptcha验证码使用(二)
    jcaptcha验证码使用(一)
    CentOS7 常用命令集合
    VM虚拟机下安装Centos7.0图文教程
    CentOS 6.5远程连接工具x shell
    Mogodb 存储DateTime问题
    RabbitMQ安装教程
    Redis 安装
    Linux平台安装MongoDB
    Windows 平台安装 MongoDB
  • 原文地址:https://www.cnblogs.com/miss1332/p/9837776.html
Copyright © 2011-2022 走看看