关于input 的选中,自定义input[type="checkbox"]样式

原文

1、css 呈现

   选中后 的input的样式可以用 /*背景图*/

     background:url(‘../pc/images/archives/icon_choosed.png‘) no-repeat center center;  )

代码

 1 /*input 选中前的样式*/
 2 input[type="checkbox"] + label::before {
 3     content: "\a0";  /*不换行空格*/
 4     display: inline-block;
 5     width:20px;
 6     height:20px;
 7     border-radius:2px;
 8     text-align:center;
 9     line-height:20px;
10     border:1px solid #ddd;
11 }
12 /*input 选中后的样式 */
13 input[type="checkbox"]:checked + label::before {
14     background:url(‘../pc/images/archives/icon_choosed.png‘) no-repeat center center;/*背景图的写法是生效的*/
15     border:none;
16 }

/*拓展**/
input[type="checkbox"]:checked + label::before {
      content: "\2713";
      background-color: yellowgreen;
}

生成效果为:

  

  

2、 现在把原来的复选框隐藏:

  

input {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}

3、注意 label 的 for与input 的 id 要保持一致:动态生成法

str1+=‘<div class="clearfix item cursor" data-isMember="‘+isMember+‘" data-userId="‘+userId+‘" >‘;
str1+=    ‘<span class="pull-left">‘+‘<span class="userName">‘+userName+‘</span>‘+‘-‘+courseCount+‘节</span>‘;
str1+=    ‘<span class="pull-right">‘;
str1+=        ‘<input type="checkbox" id="awesome_‘+i+‘" data-userId="‘+userId+‘" data-courseFeeId="‘+courseFeeId+‘" onclick="adddMemberCourse(this)">‘;
str1+=        ‘<label for="awesome_‘+i+‘"></label>‘;
str1+=    ‘</span>‘;
str1+=‘</div>‘;

//标记选中的inputfunction adddMemberCourse(obj){

 var checked = $(obj).attr("checked");

  if(checked == "checked"){
    $(obj).removeAttr("checked");
  }else{
    $(obj).attr("checked","checked");
  }

}

//获取选中的input

$(‘#selectTime .timeshow:eq(‘+i+‘) .item‘).each(function(){
  var checked = $(this).find(‘input‘).attr("checked");
  if(checked == ‘checked‘){
    courseIds += $(this).attr(‘data-timeid‘)+"-";

  }
});

参考 https://www.cnblogs.com/xinjie-just/p/7302020.html

原文地址:https://www.cnblogs.com/xiaoshen666/p/10721385.html

时间: 2024-10-12 10:14:39

关于input 的选中,自定义input[type="checkbox"]样式的相关文章

关Jquery判断input type="checkbox"元素是否被选中的判断

在用到复选框的时候,想在js中判断chekbox是否被选中 <input name="isPermit" id="isPermit" type="checkbox"> 百度了很多的判断方法 1. if($("#isPermit").attr("checked")=="checked") 2. if($("#isPermit").attr("che

原生javascript自定义input[type=checkbox]效果

上文已经讲input[type=radio]的做法发布,在我做input[input=checkbox]时候,觉得会和radio做法差不多,结果是有相似之后,但也有很大不同. 不同点有 1)checkbox自带冒泡和捕获事件,结果就是点击一下包裹checkbox的label会发生两次事件,也就是checkbox选中了,然后又不选中了,所以在对label绑定事件时候,需要停止冒泡 2)选中chekbox需要使用chekbox自带的checked属性,设置该属性的选中和被选中状态,这个与radio一

自定义input[type=&quot;checkbox&quot;]的样式

对复选框自定义样式,我们以前一直用的脚本来实现,不过现在可以使用新的伪类 :checkbox 来实现. 如果直接对复选框设置样式,那么这个伪类并不实用,因为没有多少样式能够对复选框起作用.不过,倒是可以基于复选框的勾选状态借助组合选择符来给其他元素设置样式. 很多时候,无论是为了表单元素统一,还是为了用户体验良好,我们都会选择 label 元素和 input[type="checkbox"] 一起使用.当<label>元素与复选框关联之后,也可以起到触发开关的作用. 思路:

jsp &lt;input type=&quot;checkbox&quot; name=&quot;fileId&quot;&gt; 是否选中

jsp <input type="checkbox" name="fileId"> 是否选中 var a = document.getElementsByName("fileId");for(k in a){ if(a[k].checked){ alert(是); }else{ alert(否); } }

关于input[type=&#39;checkbox&#39;]全选的问题

今天在做一个全选功能的时候,发现了一个问题,就是如果我在选择全选之前,我就已经选择了一个input,然后我再去选择全选并且以后再取消全选的时候,这个我之前选择的input始终处于选择状态,但是他的checked的值一直是在true和false之间变化,当checked=false的时候,仍然是被选中的.到现在还没处理好这个问题.希望看到的哪位大神能给个好的解决办法,实在感激.下面是类似的代码. <!DOCTYPE html><html lang="en"><

input[type=checkbox]

一个问题,今天用jquery-1.11.3.min.js时遇到的关于input复选框的问题. 类似于以下代码: <ul class="demo">  <li><label ><input type="checkbox"/>首页</label></li>  <li><label ><input type="checkbox"/>关于</

jQuery操作&lt;input type=&quot;checkbox&quot;&gt;

<input type="checkbox">: 1 2 3 4 5 2012欧洲杯"死亡之组"小组出线的国家队是:<br> <input type="checkbox" name="nation" value="Germany">德国 <input type="checkbox" name="nation" value=&q

jQuery操作 input type=checkbox的实现代码

jQuery操作 input type=checkbox的实现代码 jQuery操作 input type=checkbox的实现代码,需要的朋友可以参考下,这边脚本之家推荐大家看我们以前发布的文章 复制代码 代码如下: <input type="checkbox">: 2012欧洲杯"死亡之组"小组出线的国家队是:<br> <input type="checkbox" name="nation"

jsp &lt;input type=&quot;checkbox&quot;&gt;标记的空指针异常

今天看到书上的一段代码是这样的: 这是<input  type="checkbox">标记的代码 <br>选择你喜欢的歌手: <input type="checkbox" name="singer" value="张">张歌手 <input type="checkbox" name="singer" value="李">