How to create a dynamic jQuery string of checkbox id's

Question

Im at my wits end with this one.

When i click a checkbox, I want add the ID of the checkbox to a comma separated string in an input below. I have this working however, what I can not do is remove the ID and its comma if it already exists in the input field (checking and unchecking).

Simple form.

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

"what I can not do is remove the ID and its comma if it already exists in the input field" Can you include javascript at Question where you tried removing the string from input .value? Why do you concatenate the string if you can check if the string is already present within the .value before concatenating the string? — guest271314
– guest271314, Commented Dec 22, 2016 at 0:27
Seems like the easiest approach to this would be just to rebuild the entire comma selected list any time a checkbox state changes. — Taplar
– Taplar, Commented Dec 22, 2016 at 0:51

samrap · Accepted Answer · 2016-12-22 00:49:07Z

1

You can get the value of the input box, and use the split method to split the string of IDs into an array. At that point you can check if the ID you are looking for is in that array. Example:

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(','));

See:

String.prototype.split()

Array.prototype.indexOf()

Array.prototype.push()

Array.prototype.splice()

Array.prototype.join()

edited Dec 22, 2016 at 0:49

answered Dec 22, 2016 at 0:28

samrap

5,6735 gold badges34 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Alex Knopp Over a year ago

Could you expand your code please and explain how you add and remove the ID from the input field?

samrap Over a year ago

You can add/remove the IDs from the array as needed, then use JavaScript's Array.prototype.join() method to recreate the string and set that as the value. I'll update my answer to give you a better example.

samrap Over a year ago

Updated with a more complete example

Alex Knopp Over a year ago

Ok, looks like this is working although - The first id shows a , before it (,1 or ,2 or ,3) Im not sure that will pass in my PHP. All I have to do now is to mark all the checkboxes in that string as checked.

samrap Over a year ago

You can easily remove the leading comma with the substring method

Taplar · Accepted Answer · 2016-12-22 01:00:44Z

Why not just rebuild it?

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

Collectives™ on Stack Overflow

How to create a dynamic jQuery string of checkbox id's

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related