CODEWITHSUNDEEP
javascriptjqueryhtml
Bruce
Bruce

Reputation: 51

How to separate id with comma using map function jquery?

code: 

<script>
    $("#save_other").click(function(e){
        e.preventDefault();
        question = $(".question").map(function() {
                        return this.id;
                    }).get().join(",");
        alert(question);
    });
</script>

<input type="checkbox" class="question" id="abc">ABC
<input type="checkbox" class="question" id="pqr">PQR
<input type="checkbox" class="question" id="xyz">XYZ

<a href="javascript:void(0)" id="save_other" >Add These Question</a>

In this question, I have multiple checkboxes. Now, what happens when I click on id save_other then it alerts all value If I check only one checkbox. Now, what I actually want when I check one checkbox it shows only one value and if I check two checkboxes it shows abc,pqr like this. So, How can I do this please help me.

Thank You

Upvotes: 1

Views: 450

Answers (4)

Bhale Dino
Bhale Dino

Reputation: 246

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


    <input type="checkbox" class="question" id="abc">ABC
    <input type="checkbox" class="question" id="pqr">PQR
    <input type="checkbox" class="question" id="xyz">XYZ

    <a href="javascript:void(0)" id="save_other" >Add These Question</a>


     <script>
        $("#save_other").click(function(e){
            e.preventDefault();
            question = $(".question:checked").map(function() {
                            return this.id;
                        }).get().join(",");
            alert(question);
        });
    </script>

Upvotes: 0

Jan Ciołek
Jan Ciołek

Reputation: 1816

You can convert the selected jQuery set to the javascript array and use cool array methods.

$("#save_other").click(function(e){
    e.preventDefault();
    
    var selectedQuestionIds = $(".question").toArray().reduce((selectedIds,question) => {
    
      return question.checked ? selectedIds.concat(question.id) : selectedIds
      
    }, [])
    
    alert(selectedQuestionIds);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="question" id="abc">ABC
<input type="checkbox" class="question" id="pqr">PQR
<input type="checkbox" class="question" id="xyz">XYZ

<a href="javascript:void(0)" id="save_other" >Add These Question</a>

Upvotes: 0

Sorav Garg
Sorav Garg

Reputation: 1067

Please try this way --

var checkboxes = [];
$.each($(".question:checked"), function(){            
    checkboxes.push($(this).val());
});
var allCheckedValues = checkboxes.join(",");

Upvotes: 0

Dilip Belgumpi
Dilip Belgumpi

Reputation: 648

You are not checking whether it is checked or not

$("#save_other").click(function(e){
        e.preventDefault();
        question = $(".question").map(function() {
                        if(this.checked){
                          return this.id;
                        }
                    }).get().join(",");
        alert(question);
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="question" id="abc">ABC
<input type="checkbox" class="question" id="pqr">PQR
<input type="checkbox" class="question" id="xyz">XYZ

<a href="javascript:void(0)" id="save_other" >Add These Question</a>

Upvotes: 1

Related Questions