如何改變輸入成一列複選框點擊

Question

更改選中的複選框行

注輸入字段名稱字段名稱：類型字段可能或不可能每一行中存在。

如果名稱[]和類型[]字段存在，則將名稱更改爲name1 []和type1 []。或者如果類型[]不存在，只需更改名稱[]字段的名稱。

$(document).ready(function() { 
 
$(".click1").on('change', function() { 
 
      if($(this).is(":checked")) {   
 
       alert('checked') 
 
      }   
 
     }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<li id="row_3"> 
 
    <div class="col-md-6"> 
 
     <input type="text" name="name[]"> 
 
     <input type="text" name="type[]"> 
 
     <input type="checkbox" name="click" class="click1"> 
 
     </div> 
 
    </div> 
 
</li>

Answer 1

您應該.find('input[name^="type"]')，並檢查它是否存在，如果是的話，其他的輸入元素的name更改爲name1。下面是更新後的代碼：

$(document).ready(function() { 
 
    $(".click1").on('change', function() { 
 
    if ($(this).is(":checked")) { 
 
     if ($(this).parent().find('input[name^="type"]').length) { 
 
     $(this).parent().find('input[name^="name"]').prop('name', 'name1[]'); 
 
     } 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<li id="row_3"> 
 
    <div class="col-md-6"> 
 
    <input type="text" name="name[]"> 
 
    <input type="text" name="type[]"> 
 
    <input type="checkbox" name="click" class="click1"> 
 
    </div> 
 
</li>

Answer 2

添加id s到兩種元素，這樣就可以很容易地在代碼中訪問它們。

<input type="text" id="name" name="name[]"> 
<input type="text" id="type" name="type[]"> 

而且，你的jQuery中，改名字是這樣的：

$(document).ready(function() { 
    $(".click1").on('change', function() { 
    if($(this).is(":checked")) {   
     $("#name").attr("name", "name1[]"); 
     $("#type").attr("name", "type1[]"); 
    }   
    }); 
}); 

的好處是，如果去掉#type場，$("#type")將返回一個空集，你會不會做任何事情。