複選框傳遞給輸入字段在jquery中有衝突

Question

我試圖在字段中添加checkbox的值closest。但我想我錯過了一些東西。請參閱下面我的代碼：

$(document).ready(function(){ 
 
    $("input:checkbox").click(function() { 
 
     var output = ""; 
 
     $("input:checked").each(function() { 
 
      output += $(this).val() + ","; 
 
     }); 
 
     
 
     $(this).closest('.divs').find(".result").val(output.trim()); 
 
     
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="divs"> 
 
    <input type="text" class="result"/><br> 
 

 
    <input type="checkbox" value="1">1<br> 
 
    <input type="checkbox" value="2">2<br> 
 
    <input type="checkbox" value="3">3 
 
</div> 
 

 
<br><br> 
 

 
<div class="divs"> 
 
    <input type="text" class="result"/><br> 
 
    <input type="checkbox" value="1">1<br> 
 
    <input type="checkbox" value="2">2<br> 
 
    <input type="checkbox" value="3">3 
 
</div>

更新

我也想檢查文本框爲空，則該值會返回到empty。我試過

if($(this).closest('.divs').find('.result').val() == ""){ 
    $(this).closest('.divs').find('.result').val("empty"); 
} 

Answer 1

改變內部input type text ATTR與classname而不是id。與, unsing map()功能靶向經由父DIV

更新了複選框值1

Upadted 2

加入空值

$(document).ready(function(){ 
 
    $("input:checkbox").change(function() { 
 
     var output =$(this).closest('.divs').find("input:checked").map(function() { 
 
      return $(this).val(); 
 
     }).get(); 
 
     var res = output.length ==0 ? 'empty' : output.join(','); 
 
     $(this).closest('.divs').find(".field_results").val(res); 
 
     
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="divs"> 
 
    <input type="text" class="field_results" placeholder="empty"><br> 
 

 
    <input type="checkbox" value="1">1<br> 
 
    <input type="checkbox" value="2">2<br> 
 
    <input type="checkbox" value="3">3 
 
</div> 
 

 
<br><br> 
 

 
<div class="divs"> 
 
    <input type="text" class="field_results" placeholder="empty"/><br> 
 
    <input type="checkbox" value="1">1<br> 
 
    <input type="checkbox" value="2">2<br> 
 
    <input type="checkbox" value="3">3 
 
</div>

Answer 2

第一個問題是你有多個元素具有相同的ID，請使用此類。

其次，你使用$("input:checked").each讓所有檢查輸入，但使用("input:checked").each讓所有輸入的當前div.divs

$(document).ready(function() { 
 
    $("input:checkbox").click(function() { 
 
    var output = ""; 
 
    var length = $(this).parent('.divs').find("input:checked").length; 
 
    $(this).parent('.divs').find("input:checked").each(function(index) { 
 
     output += $(this).val() + (index !== (length - 1) ? "," : ""); 
 
    }); 
 

 
    $(this).parent('.divs').find(".field_results").val(output.trim()); 
 

 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="divs"> 
 
    <input type="text" class="field_results" /><br> 
 

 
    <input type="checkbox" value="1">1<br> 
 
    <input type="checkbox" value="2">2<br> 
 
    <input type="checkbox" value="3">3 
 
</div> 
 

 
<br><br> 
 

 
<div class="divs"> 
 
    <input type="text" class="field_results" /><br> 
 
    <input type="checkbox" value="1">1<br> 
 
    <input type="checkbox" value="2">2<br> 
 
    <input type="checkbox" value="3">3 
 
</div>