Passing checked value of checkbox in Jquery

Question

I had a modal form where you are adding a user and after saving it, it would pass the data to the table. I was able to pass the name form. I want to pass the value of the checkbox in the form to the table if it is checked or not.

Modal Form

<div id="addUser" class="modal fade" role="dialog">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-body">
            <div>
                <label>Full Name</label>
                <div>
                    <input class="form-control" id="fullname" type="text" required/>
                </div>
            </div>

            <div >
                <label>Permissions</label>
                <div>
                    <input type="checkbox" id="add" value="Add" data-parsley-multiple="status">
                    <label>Add</label>
                    <input type="checkbox" id="edit" value="Edit" data-parsley-multiple="status">
                    <label>Edit</label>
                    <input type="checkbox" id="delete" value="Delete" data-parsley-multiple="status">
                    <label>Delete</label>
                </div>
            </div>
            
            <div>
                <div class="col-12">
                    <button class="btn" id="saveUser">Add</button>
                </div>
            </div>
        </div>
    </div>
</div>

JS

$("#saveUser").click(function () {
    t.row.add(['', 
        '<input class="form-control" type="text" name="fullname[]" value="'+$("#fullname").val()+'" readonly>',
        '<input class="form-control" type="checkbox" name="permissions[]" value="'+$("#add").val()+'" data-parsley-multiple="status">',
        '<input class="form-control" type="checkbox" name="permissions[]" value="'+$("#edit").val()+'" data-parsley-multiple="status">',
        '<input class="form-control" type="checkbox" name="permissions[]" value="'+$("#delete").val()+'" data-parsley-multiple="status">',
    ]).draw(false); 
});

As you notice in my JS code, I am using datatable codes to add a row. I was able to pass the fullname and also the value of the checkbox (e.g. add, delete). However, I want to pass the check value. If it is check/uncheck in the modal, the checked/unchecked value will pass.

basically, `if ($("#add").is(':checked')) { /* IS CHECKED */ } else { /* IS NOT CHECKED */ }` — GrafiCode, Jul 27 '22 at 09:49
You always know the value (add/edit/delete) - you need to set the `checked` attribute. Note that 'checked' is a flag, you can't have `checked='false'` So something like `"... value='add' " + ($("#add").is(":checked") ? "checked" : "") + " data-..."` — freedomn-m, Jul 27 '22 at 10:03

Mina · Answer 1 · 2022-07-28T05:38:43.690

1

You can set the checked HTML property, and set its value with the corresponding checkbox checked value.

UPDATE

As @freedomn-m mentioned, the checked="false" will make the the checkbox checked, So you need conditionally set the attribute without a value.

For example

'<input class="form-control" type="checkbox" name="permissions[]"  ' +  $("#add")[0].checked ? 'checked': '' +' data-parsley-multiple="status">'

        $("#saveUser").click(function () {
            t.row
                .add([
                    "",
                    `<input class="form-control" type="text" name="fullname[]" value="${$(
                        "#fullname"
                    ).val()}" readonly>`,
                    `<input class="form-control" type="checkbox" name="permissions[]" ${
                        $("#add")[0].checked ? "checked" : ""
                    } data-parsley-multiple="status">`,
                    `<input class="form-control" type="checkbox" name="permissions[]" ${
                        $("#edit")[0].checked ? "checked" : ""
                    } data-parsley-multiple="status">`,
                    `<input class="form-control" type="checkbox" name="permissions[]" ${
                        $("#delete")[0].checked ? "checked" : ""
                    } data-parsley-multiple="status">`,
                ])
                .draw(false);
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="addUser" class="modal fade" role="dialog">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-body">
            <div>
                <label>Full Name</label>
                <div>
                    <input class="form-control" id="fullname" type="text" required/>
                </div>
            </div>

            <div >
                <label>Permissions</label>
                <div>
                    <input type="checkbox" id="add" value="Add" data-parsley-multiple="status">
                    <label>Add</label>
                    <input type="checkbox" id="edit" value="Edit" data-parsley-multiple="status">
                    <label>Edit</label>
                    <input type="checkbox" id="delete" value="Delete" data-parsley-multiple="status">
                    <label>Delete</label>
                </div>
            </div>
            
            <div>
                <div class="col-12">
                    <button class="btn" id="saveUser">Add</button>
                </div>
            </div>
        </div>
    </div>
</div>

edited Jul 28 '22 at 05:38

answered Jul 27 '22 at 09:58

Mina

14,386
3
13
26

you have a syntax error when concatenating the checked status in the string – Diego D Jul 27 '22 at 10:01
Note: `checked` is a flag attribute, it doesn't have/use a value, ie, `checked='false'` is the same as `checked` – freedomn-m Jul 27 '22 at 10:03
Yes, thanks for notifying, I just update it. – Mina Jul 27 '22 at 10:04
Please *run your snippet* before saving - there's now a different error (or don't use a snippet as it's just OPs code copied). – freedomn-m Jul 27 '22 at 10:04
The snippet shouldn't work as `t` isn't defined in the question code. – Mina Jul 27 '22 at 10:05
Without the snippet working, you can't see that `checked='false'` is created a checked checkbox. – freedomn-m Jul 27 '22 at 10:08
Yes, I just update the answer with your note, Thanks. – Mina Jul 27 '22 at 10:12
I had an error. Instead showing a checkbox, it is the word "checked" is shown. – boldsinas101 Jul 27 '22 at 15:11
It should be ```($("#add").is(":checked") ? "checked" : "") + "``` instead of ```$("#add")[0].checked ? 'checked': ''``` as @freedomn-m commented above – boldsinas101 Jul 27 '22 at 15:15
1

When using `?:` in js string concatenation, it *must* surrounded by `()` otherwise js gets confused as to which bit is being concatenated. is:checked vs [0].checked are essentially the same. This answer just needs: `+ $("#add")[0].checked ? 'checked': '' +` changed to `+ ($("#add")[0].checked ? 'checked': '') +` (or use string interpolation (template literals)) – freedomn-m Jul 27 '22 at 15:22
thanks. maybe @Mina should edit his answer to this one so that I can mark it as the best one – boldsinas101 Jul 28 '22 at 00:34
I Updated the answer with `template literals`, as string concatenation is really confusing. – Mina Jul 28 '22 at 05:39

Passing checked value of checkbox in Jquery

1 Answers1