前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >按钮随复选框选中与取消变换样式 原

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

作者头像
tianyawhl
发布2019-04-04 15:29:43
1.4K0
发布2019-04-04 15:29:43
举报
文章被收录于专栏:前端之攻略
代码语言:javascript
复制
    <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) 

代码语言:javascript
复制
$("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({});

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017/07/18 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档