How do you reference a checkbox array name value?

Question

I have a sequence of checkboxes and associated select lists. If the checkbox is checked I need to take the value of the corresponding select option and then change the total, but I can't seem to reference this value. Here is a simplified version of the HTML code:

<table>
<tr>
     <td>
         <input type="checkbox" name="checkboxCK[]" id="checkboxAR1" class="check" />
     </td>
     <td>
         <select name="addonR[]" class="select-colour">
            <option value="50">1 ($50)</option>
            <option value="100">2 ($100)</option>
            <option value="150">3 ($150)</option>
            <option value="200">4 ($200)</option>
         </select>
     </td>
</tr>
<tr>
     <td>
         <input type="checkbox" name="checkboxCK[]" id="checkboxAR2" class="check" />
     </td>
     <td>
         <select name="addonR[]" class="select-colour">
            <option value="50">1 ($50)</option>
            <option value="100">2 ($100)</option>
            <option value="150">3 ($150)</option>
            <option value="200">4 ($200)</option>
         </select>
     </td>
</tr>    <tr>
     <td>
         <input type="checkbox" name="checkboxCK[]" id="checkboxAR3" class="check" />
     </td>
     <td>
         <select name="addonR[]" class="select-colour">
            <option value="50">1 ($50)</option>
            <option value="100">2 ($100)</option>
            <option value="150">3 ($150)</option>
            <option value="200">4 ($200)</option>
         </select>
     </td>
</tr>
<table>
$<span id="theTotalAmount">150</span>

And the javascript code:

$("input.check:checkbox").click(function(){

//run through allcheckboxes that are checked and pull corresponding select option value     
for (var i = 0; i < document.getElementsByName('checkboxCK[]').length; i++) 
{
    //get the value of the selected option
    var s = document.getElementsByName('addonR['+i+']');
    var theAmount = s.options[s.selectedIndex].value;
    console.log(theAmount);

    //check the checkbox is checked and if so add the corresponding select value
    if(document.getElementsByName('checkboxCK['+i+']').checked)
    {
        totalCost = totalCost+document.getElementsByName('addonR['+i+']').value;
    }
}

//rewrite the html for total amount
document.getElementById("theTotalAmount").innerHTML = totalCost;

});

I am struggling to reference the s variable.. It keeps being undefined. Can anyone see why?

Or is there a better way to achieve what I am trying to do?

Quentin · Accepted Answer · 2015-09-23 18:26:35Z

3

The names of the checkboxes don't have a number between the square brackets in the HTML. You shouldn't put one there with your JavaScript.

document.getElementsByName('addonR[]') will give you an (array-like) HTML Collection of all the elements with that name.

answered Sep 23, 2015 at 18:26

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

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

1 Comment

nematoth Over a year ago

The problem I was facing was referencing this value. Have to accept Wero's answer here as it led to me solving my issue.

wero · Accepted Answer · 2015-09-23 18:27:13Z

1

Write

var s = document.getElementsByName('addonR[]')[i];

answered Sep 23, 2015 at 18:27

wero

33.1k3 gold badges63 silver badges87 bronze badges

Collectives™ on Stack Overflow

How do you reference a checkbox array name value?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related