解决前端页面勾选复选框显示其他按钮,没有勾选项按钮会隐藏

页面展示数据代码:

<button οnclick="newwork_show()" id="again" style="display: none" type="button" class="btn btn-success">再次执行</button>

<table class="table table-striped" id="fail_data" style="display: none">
    <thead>
        <tr>
            <th οnclick="checkInterset()">全选</th> <th>序号</th> <th style="width: 300px">id</th> <th style="width: 500px">用例名称</th> <th style="width: 450px">执行时间</th> <th style="width: 450px">操作</th> <th style="width: 100px">运行结果</th>
        </tr>
    </thead>
    <tbody id="bbsTab2">
         {% for i in fail_case %}
             <tr>
                 <td>
                     <form>
                         <input οnclick="show_again(this)" type="checkbox" name="insterest" value="{{ i.case_id }}"/>
                     </form>
                 </td>
                <td class="td_center">1</td>
                <td>{{ i.id }}</td><td>{{ i.case_name }}</td><td>{{ i.name }}</td>

                 <td>
                     <div class="btn-group" style="z-index: 0">
                        <a href="/look_report/{{ i.name }}/" target="_blank"><button class="btn btn-success" >查看报告</button></a>
                    </div>
                 </td>
                 <td><span>{{ i.result }}</span></td>

             </tr>
        {% endfor %}
    </tbody>
</table>

<!--判断复选框是否勾选,进而展示再次执行按钮-->
<script>
    function show_again() {

        var obj = document.getElementsByName("insterest");
        var objLen=obj.length;
        console.log(objLen);
        for(var i=0;i<objLen;i++){
            if(obj[i].checked==true){
                document.getElementById('again').style.display='block';
                break;
           }
            else if(obj[i].checked==false){
               document.getElementById('again').style.display='none';
            }
        }
    }

</script>

效果图:

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值