チェックボックスIDの動的jQuery文字列を作成する方法

Question

私の知恵はこれで終わりです。

チェックボックスをクリックすると、チェックボックスのIDをカンマ区切りの文字列に入力して、下の入力に追加します。しかし、私はこの作業をしていますが、IDフィールドとカンマが入力フィールドにすでに存在する場合は、IDとそのコンマを削除します（チェックとチェックを外してください）。

シンプルなフォーム。

<form> 
<input class="iteminput" type="checkbox" value="1" id="1" name="<?php echo $title; ?>"> 
<input class="iteminput" type="checkbox" value="2" id="2" name="<?php echo $title; ?>"> 
<input class="iteminput" type="checkbox" value="3" id="3" name="<?php echo $title; ?>"> 

<!-- Note that this field may or may not have an existing string of ID's (1,2,3) from previous saves -->  
<input type="text" id="excludelist" value="<?php echo $saved-string; ?>"> 
</form> 

jQuery(document).ready(function(){ 
    jQuery('.iteminput').on('click', function(){ 
     var id = jQuery(this).attr('ID'); 
     var string = jQuery('#excludelist').val(); 
     var newstring = string + id + ','; 
     jQuery('#excludelist').val(newstring); 
    }) 
}) 

Answer 1

あなたは、入力ボックスの値を取得し、配列にIDの文字列を分割するsplitメソッドを使用することができます。その時点で、探しているIDがその配列にあるかどうかを確認できます。例：

const id = 3; 
const inputValue = $('input[type=text]').val(); 

// Split the IDs into an array by comma. 
const currentIds = inputValue.split(','); 

if (currentIds.indexOf(id) === -1) { 
    // ID has not yet been added to the input box. 
    // We can add it to the array here, and 
    // update it later. 
    currentIds.push(id); 
} else { 
    // ID is in the current list of IDs. We 
    // can remove it like this: 
    currentIds.splice(currentIds.indexOf(id), 1); 
} 

// Finally, we can reset the input string 
// with the new values we set above. 
$('input[type=text]').val(currentIds.join(',')); 

参照：

String.prototype.split()

Array.prototype.indexOf()

Array.prototype.push()

Array.prototype.splice()

Array.prototype.join()

Answer 2

なぜそれを再構築しないのですか？

var $iteminputs = $('.iteminput'); 
 

 
$iteminputs.on('change', function(){ 
 
    var ids = $.map($iteminputs.filter(':checked'), function(element){ return element.id; }); 
 
    $('#excludelist').val(ids.join(',')); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input class="iteminput" type="checkbox" value="1" id="1" name="title1"> 
 
<input class="iteminput" type="checkbox" value="2" id="2" name="title2" checked> 
 
<input class="iteminput" type="checkbox" value="3" id="3" name="title3" checked> 
 

 
<!-- Note that this field may or may not have an existing string of ID's (1,2,3) from previous saves -->  
 
<input type="text" id="excludelist" value="2,3">