JQ各类效果展示（一）

最新推荐文章于 2020-10-20 08:26:58 发布

Yguang666

最新推荐文章于 2020-10-20 08:26:58 发布

阅读量516

点赞数

分类专栏： jQuery HTML 文章标签： JQ各类效果实现

本文链接：https://blog.csdn.net/SunGuangSir/article/details/48179323

版权

jQuery 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

HTML

1 篇文章 0 订阅

订阅专栏

效果展示

实现方法：

    <script src="js/jquery-2.0.3.min.js" type="text/javascript"></script>
     <script type="text/javascript">
     $(document).ready(function(){
        $("#goods-kg li:first").addClass('kg-check');
        $("#goods-kg li:first").removeClass('kg-default');
        $('#goods-kg li').click(function(){     
        $(this).addClass("kg-check").siblings().addClass('kg-default').removeClass('kg-check');
    });
     });
    </script>
     <style>
         .goods-kg{width:90%;margin:0 auto;height:40px;line-height:40px;margin-top:10px;color:#9C9C9C;}
        .goods-kg li{float:left;border-radius:5px; padding:0px 20px;margin-right:2%; text-align:center; font-size:12px;}
        .kg-default{border:1px solid #9C9C9C;}
        .kg-check{background:#E9543C;color:#fff;border:1px solid #E9543C;}
     </style>

     <html>
         <ul class="goods-kg" id="goods-kg">
            <li class="kg-default">500g</li>
            <li class="kg-default">1000g</li>
        </ul>
    </html>

效果~全选（全不选）

实现方法

<input type='checkbox' name='all' id='sel_all'  />&nbsp;&nbsp;&nbsp;<input type='submit' style='border:0px; background:#00FF00;outline:0px;' value='(删除)' onclick='return all_length()'>
*//全选(全不选)按钮*

<td><input type='checkbox' name='my_theme[]' value='1' /></td>

<script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
<script>
$(document).ready(function(){

     $('#sel_all').click(function(){

              var mytheme_ids = $("input[name='my_theme[]']");
              //if(this.checked)
              if($(this).prop('checked'))
               {
                   mytheme_ids.prop('checked',true);
               }
               else
               {
                   mytheme_ids.prop('checked',false);
               }

            });

});
//选择数量
function all_length()
{
   var length_num = $("input[name='my_theme[]']:checked").length;
    if(length_num <=0)
    {
       alert("请选择要删除的文章");
       return false;
    }
}

</script>