jQuery实现点击复选框新增一行

最新推荐文章于 2022-11-13 19:53:08 发布

Kathy_LLi

最新推荐文章于 2022-11-13 19:53:08 发布

阅读量709

点赞数

本文链接：https://blog.csdn.net/Kathy_Hui/article/details/82460458

版权

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>点击复选框新增一行</title>
   <script src="../js/jquery-1.11.3.min.js"></script>
   <style>
       .line {
           width: 100%;
           display: flex;
           justify-content: center;
           align-items: center;
           margin-bottom: 20px;
       }
       input[type="text"] {
           width: 15%;
           height: 40px;
           padding-left: 10px;
       }
       input[type="checkbox"] {
           width: 10%;
           height: 20px;
       }

   </style>
   <script>
       function findInp(curr){
           $('.chkbox').each(function(index){
               $("input[type='checkbox']").each(function(){
       if($(this).is(":checked")){
       $(this).siblings().removeAttr("disabled");
       }else{
       $(this).siblings().attr("disabled","disabled");

       }
       });
           })
       }
       function add(me){
           var isChecked = $(me).is(":checked");
           if(isChecked){
               $('.box').append('<div class="line lineModul"><input type="text" style="margin-right: 20px;" placeholder="请输入姓名" disabled><input type="text" placeholder="请输入年龄" disabled><input type="checkbox" class="chkbox" οnclick="add(this)"></div>');
           }else{
       if(isChecked.length == 0){
       isChecked.prop('checked','checked');
       }
       $(me).parent().remove();
       }
           findInp();
       }
   </script>
</head>
<body>
   <div class="box">
       <div class="line">
           <input type="text" style="margin-right: 20px;" placeholder="请输入姓名">
           <input type="text" placeholder="请输入年龄">
           <input type="checkbox" class="chkbox" οnclick="add(this)" checked>
       </div>
       <div class="line lineModul">
           <input type="text" style="margin-right: 20px;" placeholder="请输入姓名" disabled>
           <input type="text" placeholder="请输入年龄" disabled>
           <input type="checkbox" class="chkbox" οnclick="add(this)">
       </div>
   </div>

</body>
</html>

Kathy_LLi

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现点击复选框新增一行

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;点击复选框新增一行&lt;/title&gt; &lt;script src="../js/jquery-1.11.3.min.js&
复制链接

扫一扫