チェックボックスの入力フィールドへのパスがjqueryで矛盾しています

Question

closestのフィールドにcheckboxの値を追加しようとしています。しかし、私は何かを逃したと思う。

$(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

classnameの代わりid変化input type textのattrを取得するために("input:checked").eachを使用して取得します。親のdivを経由して、チェックボックスの値を目標

, unsing map()機能を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を使用すると、すべての入力を確認しますが、現在の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>