Как создать динамическую строку jQuery из флажка id's

Im на мой ум заканчивается этим.Как создать динамическую строку jQuery из флажка id's

Когда я нажимаю флажок, я хочу добавить идентификатор этого флажка в строку, разделенную запятыми, на вход ниже. Однако я работаю над тем, что я не могу сделать, это удалить идентификатор и его запятую, если он уже существует в поле ввода (проверка и снятие отметки).

Простая форма.

<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); 
    }) 
})

источник

2016-12-22 Alex Knopp

_ «что я не могу сделать, это удалить ID и его запятой, если она уже существует в поле ввода» _ Вы можете включить 'javascript' на вопрос, где вы попытался удалить строку от 'input'' .value'? Почему вы объединяете строку, если можете проверить, присутствует ли строка в '.value' перед конкатенацией строки? – guest271314

Кажется, что самый простой подход к этому - это просто перестроить весь список, выделенный запятой, при каждом изменении состояния флажка. – Taplar

Вы можете получить значение поля ввода, и использовать метод split разбить строку идентификаторов в массив. В этот момент вы можете проверить, находится ли идентификатор, который вы ищете, в этом массиве. Пример:

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

источник

2016-12-22 00:28:23 samrap

Не могли бы вы расширить свой код и объяснить, как вы добавляете и удаляете идентификатор из поля ввода? –

Вы можете добавлять/удалять идентификаторы из массива по мере необходимости, а затем использовать метод JavaScript 'Array.prototype.join()' JavaScript, чтобы воссоздать строку и установить ее как значение. Я обновлю свой ответ, чтобы дать вам лучший пример. – samrap

Обновлен с более полным примером – samrap

Почему бы просто не перестроить его?

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">

источник

2016-12-22 01:00:44 Taplar

Как создать динамическую строку jQuery из флажка id's

ответ

Смежные вопросы