Unable to get checkbox value in Jquery?

Question

I am dynamically creating checkboxes using jquery and then appending the checkboxes inside a div tag. Now, I want to get the values of the checkboxes when I click on a button but for some reason, I am getting only "on" instead of the actual value. What could I be doing wrong ?

HTML:

<div class="checkboxes">
  <label>Select a category</label><br>
</div>


<button style="background-color: #e7e7e7; color: black; border: none;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;" id="clr_btn">Clear
            </button>

JavaScript:

   $(document).ready(function () {

        $.ajax({
            url: "/getcategory",
            type: "GET",

            success: function (result) {
                var result = result.results;

                if (result.length > 0) {


                    $.each(result, function (i, res) {
                        var $chk = $('<input type="checkbox" class="chklist" name="chke"  id="chk_'+i+'" val ='+res.name+'/>'+res.name+"<br />");
                        $('.checkboxes').append($chk)


                    });



                }


            },
            error: function (error) {


            }
        });
    })


// button click event

  $('#clr_btn').click(function (e) {


  alert($("input[name=chke]:checked").map(
     function () {return this.value;}).get().join(","));

    })

Please post all of the relevant code so we can replicate your issue. You mention a "button's" click event, but where is the button? — Scott Marcus
– Scott Marcus, Commented Oct 8, 2018 at 18:29
Can you try to get the value with the "this.val()" instead of "this.value"? — Hugo E Sachez
– Hugo E Sachez, Commented Oct 8, 2018 at 18:32
@HugoESachez:- Yes you are right. I was using val instead of value and also not using proper delimeters. Thank you so much — Remy Phrentch
– Remy Phrentch, Commented Oct 8, 2018 at 18:48

Scott Marcus · Accepted Answer · 2018-10-08 18:50:37Z

In your HTML literal string, you weren't setting the value of the elements, you were setting the val attribute, which doesn't exist.

// Dummy variable to make loop run
let result = [{name:"foo"},{name:"bar"},{name:"baz"}];

$.each(result, function (i, res) {
  var $chk = $('<input type="checkbox" class="chklist" name="chke"'  
                + 'id="chk_' + i + '" value =' + res.name + '>' + 
                res.name + "<br />");
  $('.checkboxes').append($chk)
});

// JQuery recommends using ".on()" to bind events now:
$('#clr_btn').on("click", function (e) {
  alert($("input[name='chke']:checked").map(
    function () {return this.value;}).get().join(","));
});

#clr_btn {
        background-color: #e7e7e7; 
        color: black; border: none;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkboxes">
  <label>Select a category</label><br>
</div>

<!-- Don't use inline CSS. -->
<button id="clr_btn" type="button">Clear</button>

Collectives™ on Stack Overflow

Unable to get checkbox value in Jquery?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related