need a javascript function that reads dynamic check box id on jsp

Question

i have included a dynamic checkbox using rs.getstring. i need to know which checkbox is checked.

<th>
  <input type="checkbox" name="chkSingle_<%=counter %>" id ="chkSingle_<%= counter%>" value="<%=rs.getInt(11)%>">
</th>

Check the answers here http://stackoverflow.com/a/5539186/3639582 — Shaunak D, Jun 11 '15 at 04:54
possible duplicate of [Get the value of checked checkbox?](http://stackoverflow.com/questions/11599666/get-the-value-of-checked-checkbox) — Kenneth Clark, Jun 11 '15 at 04:54

Newinjava · Accepted Answer · 2015-06-13T05:17:14.717

Try this

function getCheckedItems(checkboxName) {
    var checkboxes = document.querySelectorAll('input[name="'+checkboxName+'"]:checked'), values = [];
    Array.prototype.forEach.call(checkboxes, function(el) {
        values.push(el.value);
    });
    return values;
}

You can call this function and pass the name of the checkbox, you can dynamically bind the onclick function to the button and provide the dynamic name you created while creating the checkbox.

Edited

<!DOCTYPE html>
<html>
<head>

</head>
<body>
    <input type="checkbox" name="chkSingle" id ="chkSingle1" value="value1">
    <input type="checkbox" name="chkSingle" id ="chkSingle2" value="value2">
    <input type="checkbox" name="chkSingle" id ="chkSingle3" value="value3">
    <button onclick="alert(getCheckedItems('chkSingle'))">Click</button>
    <script type="text/javascript">
        function getCheckedItems(checkboxName) {
            var checkboxes = document.querySelectorAll('input[name="'+checkboxName+'"]:checked'), values = [];
            Array.prototype.forEach.call(checkboxes, function(el) {
            values.push(el.value);
            });
            return values;
        }
    </script>
</body>
</html>

Edited 2:

Try this method too.

function getCheckedItems(checkboxName) {
        var checkboxes = document.getElementsByName(checkboxName);
                var selected = [];
                for (var i=0; i<checkboxes.length; i++) 
                {
                    if (checkboxes[i].checked) 
                    {
                         selected.push(checkboxes[i].value);
                }
         }
       return selected;
    }

This edit has nothing to do with the question. This edit is on asker's request

When you are dynamically adding checkboxes, do this:

//this is your function I assume.
function toCreateCheckBoxesDynamically()
{
    create checkboxes dynamically;
    attach an attribute as onclick="function WhichTakesCheckedValuesAndAttachValuesToHiddenFields('dynamicallyCreatedCheckBoxName')" to the button.

                                        OR

    //bind a click event to the button and call this function "function WhichTakesCheckedValuesAndAttachValuesToHiddenFields('dynamicallyCreatedCheckBoxName')"
    document.getElementById("yourButton").addEventListener("click", function()
    {
          whichTakesCheckedValuesAndAttachValuesToHiddenFields('dynamicallyCreatedCheckBoxName');
    });
}

// this is the function which you call on button click while submitting the form
function whichTakesCheckedValuesAndAttachValuesToHiddenFields(checkboxName)
{
     var checkboxes = document.getElementsByName(checkboxName);
            var selected = "";
            for (var i=0; i<checkboxes.length; i++) 
            {
                if (checkboxes[i].checked) 
                {
                      if(selected == "" || selected == 'undefined')
                             selected = checkboxes[i].value;
                      else
                             selected = selected +","+ checkboxes[i].value;
                }
        }

    document.getElementById("hiddenFieldName").value = selected ;// the stored value is comma separated string so retrieve it on the server by using split method which will give you string array and then do your further work.
    document.getElementById("yourFormName").submit(); // submit this form
}

hidden field syntax:

<input type=hidden name="yourHiddenFieldName" value="">// inside your form in html

OR one more tip

you can also save the dynamically created checkbox name in the hidden field in the form and after submitting get those checked values on the basis of that hidden field value as

String checkBoxName = request.getParameter('hiddenFieldName');

and then get all checkedBoxes values as

String checkedboxes[] = request.getParameterValues(checkBoxName);

Doing this you will get values of all checked boxes on the server side.

@AmanArora check the edited answer, have provided a simple demo. — Newinjava, Jun 11 '15 at 05:59
document.querySelectorAll this gives an error that says document doesn't support this property. Can you do it using document.getelementbyid — Aman Arora, Jun 11 '15 at 11:56
have you included this tag at the very start of your document " " — Newinjava, Jun 11 '15 at 12:11
how can we do it using id when there are multiple checkboxes? because ids are unique. — Newinjava, Jun 11 '15 at 12:13
@AmanArora, I edited my answer to add new method, please check it. — Newinjava, Jun 11 '15 at 12:19
Can you tell me how to get the result from this function and use that result as input parameter to call a servlet — Aman Arora, Jun 11 '15 at 13:19
@AmanArora when you are submitting your form, call this method and save the value returned by this function in a hidden field in the form, so that when your form is submitted it will be available to servlet. On the servlet side just take down the value as request.getParameter("hiddenFieldName"). — Newinjava, Jun 11 '15 at 17:11
@AmanArora if you are satisfied with the answer for your main question , then you can accept the answer. — Newinjava, Jun 11 '15 at 17:13
i am a beginner can you please tell me the exact syntax for how could i store the function value.....thanks in advance — Aman Arora, Jun 12 '15 at 04:37
Do one thing, call a function on your button click, in that function set the checkbox value in a hidden field which is in your form, and then submit your form from javascript as formname.submit(); , i will show you syntax in evening, m out currently, commented through mobile. — Newinjava, Jun 12 '15 at 11:14
@AmanArora I have edited and tried to explain what you can do. If any problem , please let me know. — Newinjava, Jun 12 '15 at 15:52
@AmanArora you can also save the dynamically created checkbox name in the hidden field in the form and after submitting get those checked values on the basis of that hidden field value as String checkBoxName = request.getParameter('hiddenFieldName'); and then get all checkedBoxes values as String checkedzboxed[] = request.getParameterValues(checkBoxName); Doing this you will get values of all checked boxes on the server side. — Newinjava, Jun 13 '15 at 05:14

score 0 · Answer 2 · answered Jun 11 '15 at 05:28

0

you can use $("input:checked[name^='chkSingle_']") to get all checkboxes that are selected.

answered Jun 11 '15 at 05:28

Tapan Pandya

114
2

he has tagged only javascript, not jquery. – Newinjava Jun 11 '15 at 06:04

score 0 · Answer 3 · answered Jun 11 '15 at 05:55

0

Try this code..

var ids = [],
    cbx = document.querySelectorAll('input[type="checkbox"]');

for (i = 0, l = cbx.length; i < l; i++) {
       ids.push(cbx[i].id);
}

console.log(ids);

If you want anymore help, jsfiddle is available

answered Jun 11 '15 at 05:55

Jaffer Wilson

7,029
10
62
139

need a javascript function that reads dynamic check box id on jsp

3 Answers3