Show Selected Multiple checkbox values as Text using jquery (Dynamic values)

Question

Show Selected Multiple checkbox values as text. This not duplicate i have searched for it.

Dynamic Form values:

<div class="form-group">Eligible Branch
    <select id="eligiblebranch" multiple="multiple" class="form-control" >
        <?php  $branch = $conn->query("SELECT * FROM r_branch  ORDER BY id_branch ASC");
            while ($branchresult = $branch->fetch_assoc()) { ?>
            <option value="<?php echo $branchresult['id_branch']; ?>"> <?php echo $branchresult['branch_name']; ?> </option>
        <?php } ?>
    </select>
</div>

Script:

var checked_checkboxes = $("[id*=eligiblebranch] input:checked");
var message = "";
checked_checkboxes.each(function () {
    var value = $(this).val();
    message += + value;
    message += "\n";
});
$("#eligiblebranch1").html(message);

Output should be Text and has to visible here:

<span id="eligiblebranch1"> </span>

Mohit Tanwani · Accepted Answer · 2016-09-27 16:54:42Z

1

To get an array of values from multiple checked checkboxes, use jQuery map/get functions:

var checkedValues = $('input[type=checkbox]:checked').map(function(_, el) {
    return $(el).val();
}).get();

This will return array with checked values, like this one: ['1', '2']

You can make it as string by using join

var checkedValues = $('input[type=checkbox]:checked').map(function(_, el) {
    return $(el).val();
}).get().join(",");

Or you can use serialize() as well.

console.log($('input[type=checkbox]:checked').serialize());

edited Sep 27, 2016 at 16:54

answered Sep 27, 2016 at 16:47

Mohit Tanwani

6,6382 gold badges16 silver badges33 bronze badges

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

9 Comments

Mr world wide Over a year ago

It worked bro thank you but how can i show the text of it. I am reached daily vote limit i will vote you tomorrow..

Mr world wide Over a year ago

i am getting as 1 next line 3 next line 5 etc.. selected option id's

Mohit Tanwani Over a year ago

are you using multiselect or which jquery plugin ? It seems that there are options inside the options. if yes then try to use option:selected instead of checkbox..

Mohit Tanwani Over a year ago

Did you try to use $(this).text() instead of $(this).val() ?

Mohit Tanwani Over a year ago

Let us continue this discussion in chat.

|

gil.neo · Accepted Answer · 2016-09-27 16:58:39Z

1

I think you already have the answer but it needs a little modification.

var checked_checkboxes = $("[id*=eligiblebranch] input:checked");
var message = "";
checked_checkboxes.each(function () {
    var value = $(this).val();
    message += value;
    message += "<br>";
});
$("#eligiblebranch1").html(message);

answered Sep 27, 2016 at 16:58

gil.neo

1837 bronze badges

2 Comments

Mr world wide Over a year ago

id's are coming i want to show the text in that id. what i have to change..?

gil.neo Over a year ago

So you want to show the label next to the checkbox. That will depend on how your php code is translated to html. Can you show that part of html? you can get it from the browser's console.

Collectives™ on Stack Overflow

Show Selected Multiple checkbox values as Text using jquery (Dynamic values)

2 Answers 2

9 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related