Using Javascript to access the index of an element that has been checked and

Question

Using Javascript to access the index of an element that has been checked and

I am working on a dynamic feature that involves a JavaScript variable called 'options'. This variable is designed to store and update a string with the .innerHTML content of every checkbox checked by the user. For instance, if the user checks Instagram and Google+, 'options' will display Instagram, Google+.

Below is the HTML structure:

<section id="extra-features">
    <div class="span3">
        <label class="checkbox" for="Checkbox1">
            <input type="checkbox" class="sum" value="50" data-toggle="checkbox"> Instagram
        </label>
        <label class="checkbox">
            <input type="checkbox" class="sum" value="50" data-toggle="checkbox"> Review site monitoring
        </label>
        <label class="checkbox">
            <input type="checkbox" class="sum" value="50" data-toggle="checkbox"> Google+
        </label>
        <label class="checkbox">
            <input type="checkbox" class="sum" value="50" data-toggle="checkbox"> LinkedIn
        </label>
    </div>

    <div class="span3">
        <label class="checkbox">
            <input type="checkbox" class="sum" value="50" data-toggle="checkbox"> Pinterest
        </label>
        <label class="checkbox">
            <input type="checkbox" class="sum" value="50" data-toggle="checkbox"> FourSquare
        </label>
        <label class="checkbox">
            <input type="checkbox" class="sum" value="50" data-toggle="checkbox"> Tumblr
        </label>
        <label class="checkbox">
            <input type="checkbox" class="sum" value="50" data-toggle="checkbox"> Advertising
        </label>
    </div>
</section>

<div class="card-charge-info">
    Your card will be charged $<span id="payment-total">0</span> now, and your subscription will bill $<span id="payment-rebill">0</span> every month thereafter. You can cancel or change plans anytime.
</div>

The JavaScript code snippet is as follows:

var price = 0,
    additional = 0,
    options = "",
    inputs = document.getElementsByClassName('sum'),
    total  = document.getElementById('payment-total'),
    total2 = document.getElementById('payment-rebill');

for (var i=0; i < inputs.length; i++) {
    inputs[i].onchange = function() {
        var add = this.value * (this.parentNode.className.split(" ").indexOf("checked") > -1 ? 1 : -1);
            additional += add
            total.innerHTML = price + additional;

        if (price == select.options[2].value) {
            total2.innerHTML = 0;
        }
        else {
            total2.innerHTML = price + additional;
        }
    }
}

Access the JSFiddle link here: http://jsfiddle.net/rynslmns/LQpHQ/

javascript html css

Answer 1

Answer №1

If you want a better approach, consider tabulating the data whenever the check state changes. The current method is causing issues where you start at 0 but end up in negative total price territory soon after toggling a few options.

In addition, managing options as a string may lead to complications. It might be more efficient to use an array for easier additions and removals (especially if you tabulate everything at the end).

Here's an example:

var inputs = document.getElementsByClassName('sum'),
    total  = document.getElementById('payment-total'),
    total2 = document.getElementById('payment-rebill');

function sumItUp(){
    var ttl = 0, additional = 0, options = [];
    for (var i = 0; i < inputs.length; i++){
        if (inputs[i].checked){
            options.push(inputs[i].parentNode.textContent.trim());
            var n = new Number(inputs[i].value);
            if (!isNaN(n)) additional += n;
        }
    }
    total.innerHTML = ttl.toFixed(2);
    total2.innerHTML = (ttl + additional).toFixed(2);
    alert('Options:\n\n' + options.join(', '));
}

for (var i = 0; i < inputs.length; i++){
    inputs[i].addEventListener('change', sumItUp);
}

if (!String.prototype.trim){
    String.prototype.trim = function(){
        return this.replace(/^\s+|\s+$/g,'');
    };
}

Check out the jsFiddle here

Answer 2

If you want a better approach, consider tabulating the data whenever the check state changes. The current method is causing issues where you start at 0 but end up in negative total price territory soon after toggling a few options.

In addition, managing options as a string may lead to complications. It might be more efficient to use an array for easier additions and removals (especially if you tabulate everything at the end).

Here's an example:

var inputs = document.getElementsByClassName('sum'),
    total  = document.getElementById('payment-total'),
    total2 = document.getElementById('payment-rebill');

function sumItUp(){
    var ttl = 0, additional = 0, options = [];
    for (var i = 0; i < inputs.length; i++){
        if (inputs[i].checked){
            options.push(inputs[i].parentNode.textContent.trim());
            var n = new Number(inputs[i].value);
            if (!isNaN(n)) additional += n;
        }
    }
    total.innerHTML = ttl.toFixed(2);
    total2.innerHTML = (ttl + additional).toFixed(2);
    alert('Options:\n\n' + options.join(', '));
}

for (var i = 0; i < inputs.length; i++){
    inputs[i].addEventListener('change', sumItUp);
}

if (!String.prototype.trim){
    String.prototype.trim = function(){
        return this.replace(/^\s+|\s+$/g,'');
    };
}

Check out the jsFiddle here

Answer 3

Answer №2

To retrieve the text of a checkbox, using .innerHTML won't work since checkboxes do not contain any visible text. In this case, you can utilize .nextSibling instead. An example implementation might look like this:

var price = 0,
additional = 0,
options = "",
inputs = document.getElementsByClassName('sum'),
total  = document.getElementById('payment-total'),
total2 = document.getElementById('payment-rebill');

for (var i=0; i < inputs.length; i++) {
    inputs[i].onchange = function() {
        var text = this.nextSibling.nodeValue;
        if(options.indexOf(text) != -1) {
            options += text + ',';
        }
    }
}

It is important to also account for scenarios where a checkbox is unselected.

Answer 4

To retrieve the text of a checkbox, using .innerHTML won't work since checkboxes do not contain any visible text. In this case, you can utilize .nextSibling instead. An example implementation might look like this:

var price = 0,
additional = 0,
options = "",
inputs = document.getElementsByClassName('sum'),
total  = document.getElementById('payment-total'),
total2 = document.getElementById('payment-rebill');

for (var i=0; i < inputs.length; i++) {
    inputs[i].onchange = function() {
        var text = this.nextSibling.nodeValue;
        if(options.indexOf(text) != -1) {
            options += text + ',';
        }
    }
}

It is important to also account for scenarios where a checkbox is unselected.

Using Javascript to access the index of an element that has been checked and

Answer №1

Answer №2

Similar questions

What advantages does incorporating "function() 'use strict'" into each individual file provide?

Dimensions in Material UI

Extract data from Billboard Hot 100 Artist Singles History using BeautifulSoup

Surprising outcome caused by introducing a service dependency within another service in Angular 6

What is the best way to showcase an array of objects in a table using AngularJS that updates

Execute jQuery's .one() function only when in the viewport

Inspecting the options within a dropdown menu to adjust a styling attribute

The battle between Hover, Focus, and Blur modes intensifies

Adding a Click class can cause significant disruption to the entire CSS layout

Is there a way to create a Captcha image from text using JavaScript in an HTML document?

I attempted to separate a string containing <br> tags using the explode function, but the method was not successful

Objects array - does not support the 'push' function

Unable to use OrbitControls with Node 12's ES6 import functionality

What is the best way to convert an Angular object into a string using a for-loop and display it using $sce in AngularJS?

What is the connection between tsconfig.json and typings.json files?

Employ the responseText property of $.ajax() to assign the data to a variable in JavaScript

Tips for creating read-only checkboxes with multipledropdown.js in Angular.js

Eliminating unique phrases from text fields or content sections with the help of jQuery or JavaScript

Following a Node/Npm Update, Sails.js encounters difficulty locating the 'ini' module

Error: The call stack exceeded the maximum size due to an unidentified cause