专栏首页前端之攻略按钮随复选框选中与取消变换样式 原

按钮随复选框选中与取消变换样式 原

    <tr>
        <td>
            <input type="checkbox" value="1" />
        </td>
        <td>名称</td>
        <td>单位名称</td>
        <td class="lastcolumn">
            <a href="#" onclick="">
                <button class="btn btn-warning btn-xs" type="button" id="btDelete"><i class="fa fa-remove"></i>停用</button>
            </a>
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" value="0" />
        </td>
        <td>名称</td>
        <td>单位名称</td>
        <td class="lastcolumn">
            <a href="#" onclick="">
                <button class="btn btn-warning btn-xs" type="button" id="btDelete"><i class="fa fa-remove"></i>停用</button>
            </a>
        </td>
    </tr>

//$("input:checkbox[value='1']").attr("checked","checked"); //首先根据后台传进来的value值来设置初始状态为选择还是不选中,如果value为1设置checked为true,注意true不要加引号,并找到最后一列改变class,如果值为0 改变class与html内容 //为checkbox加change事件 如果存在checked属性执行更换class,变化内容,设置checked为false,如果不存在checked属性则执行相应的代码。注意if里面要if($(this).attr("checked")不能写成if($(this).attr("checked")==true) 

$("input:checkbox").each(function(i,n){
	   var value = $(this).attr("value");
	   if(value=="1"){
	   $(this).attr("checked",true);
	   $(this).parent().siblings("td:last-child").find("button").removeClass("btn-warning").addClass("btn-info");
	   }else if(value=="0"){
	   //$(this).attr("checked",false);
	    $(this).parent().siblings("td:last-child").find("button").removeClass("btn-info").addClass("btn-warning");
	    $(this).parent().siblings("td:last").find("button").html("<i class='fa fa-eye'></i>启用")
	   }
	})
	
$("input:checkbox").change(function(){
	
	if($(this).attr("checked")){
	 $(this).parent().siblings("td:last").find("button").removeClass("btn-info").addClass("btn- warning");
	 $(this).parent().siblings("td:last").find("button").html("<i class='fa fa-eye'></i>启用")
	 $(this).attr("checked",false);
	 //$(this).attr("value")=0;
	}else if(!$(this).attr("checked")){
	    $(this).parent().siblings("td:last").find("button").removeClass("btn-warning").addClass("btn-info");
	    $(this).parent().siblings("td:last").find("button").html("<i class='fa fa-remove'></i>停用")
	    $(this).attr("checked",true);
	}
	}) 

first与first-child区别

$("ul li:first")             //选取第一个 <ul> 元素的第一个 <li> 元素

注意在样式中没有ul li:first这种写法

$("ul li:first-child")    //选取每个 <ul> 元素的第一个 <li> 元素

<table>      <tr><td>Row 1</td></tr>      <tr><td>Row 2</td></tr>      <tr><td>Row 3</td></tr> </table>

<script>

$("td:first-child").css("color", "red");      //三个Row都为红色

$("td:first").css("color", "red");               //Row1为红色

</script>

(adsbygoogle = window.adsbygoogle || []).push({});

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 滚动插件SuperSlide的用法 原

    (adsbygoogle = window.adsbygoogle || []).push({});

    tianyawhl
  • Jquery如何删除table里面checkbox选中的多个行与多个列

    (adsbygoogle = window.adsbygoogle || []).push({});

    tianyawhl
  • 响应式状态时的jqprint打印 原

    最近需要打印,使用jqprint 进行打印,页面状态是电脑平板都能正常显示的响应式页面,打印时由于要打印在一个A4纸上,需要定义打印的宽度,并且点击打印的同时,...

    tianyawhl
  • 使用jquery的tmpl构建复杂表格

    Tmpl提供了几种tag: ${}:等同于{{=}},是输出变量,通过了html编码的。 {{html}}:输出变量html,但是没有html编码,适合输出ht...

    一笠风雨任生平
  • 前端学习笔记之HTML body内常用标签

    body中的标签是会显示到浏览器窗口中的,body内的标签只有一个作用就是用来标记语义的,语义指的是从字面意思就可以理解被标记的内容是用来做什么的

    Jetpropelledsnake21
  • 前端基础-HTML基础(三)

    table标签caption标签th/tr/td标签表格的删除与合并表格行列的删除表格行列的合并参考

    efonfighting
  • asp企业网站源码部分

    用户1112962
  • React源码分析与实现(一):组件的初始化与渲染

    阅读源码的方式有很多种,广度优先法、调用栈调试法等等,此系列文章,采用基线法,顾名思义,就是以低版本为基线,逐渐了解源码的演进过程和思路。

    Nealyang
  • 购物车案例【简单版】

    前言 为了巩固MVC的开发模式,下面就写一个购物车的小案例.. ①构建开发环境 导入需要用到的开发包 ? 建立程序开发包 ? ---- ②设计实体 书籍实体 ...

    Java3y
  • 【JavaWeb基础】购物车案例(修订版)

    上面的做法是不合适的,试想一下:如果我要购买两本相同的书,购物车的页面上就出现了两本书,而不是书2。买三本相同的书就在购物页面上出现三本书,而不是书3.

    Java3y

扫码关注云+社区

领取腾讯云代金券