JavaScript & Checkboxes - More efficient way of storing values of each checkbox?

Question

Is there a more efficient way of storing my checkbox values?

Each checkbox has an assigned value, I was wondering if there was a better way of storing these values (destinationoflink1,2,3,etc)? perhaps store them as an array and call them?...although I am unsure

HTML page extract:

    <form>
        <label for="checkbox1">Link #1</label>
        <input type="checkbox" id="checkbox1" value="http://www.destinationoflink1.com">
        <label for="checkbox2">Link #2</label>
        <input type="checkbox" id="checkbox2" value="http://www.destinationoflink2.com">
        <label for="checkbox3">Link #3</label>
        <input type="checkbox" id="checkbox3" value="http://www.destinationoflink3.com">

        <input type="button" value="open links" id="open_link"/>
    </form>

Javascript file extract (if useful):

$("#open_link").click(function() {
    performOpenLink();
})

function performOpenLink(){
$("input[type=checkbox]").each(function() {
        if (this.checked) {
            window.open(this.value)
        }
    });
}

jasonscript · Accepted Answer · 2015-06-19 05:20:38Z

1

You could generate your checkboxes dynamically using an array

Modified HTML

<form>
    <div id="checkbox_container"></div>    
    <input type="button" value="open links" id="open_link"/>
</form>

Modified JavaScript

var destinations = [
    {'label': 'Checkbox1', 'value' : 'http://www.destinationoflink1.com'},
    {'label': 'Checkbox2', 'value' : 'http://www.destinationoflink2.com'},
    {'label': 'Checkbox3', 'value' : 'http://www.destinationoflink3.com'}
];

$(function(){
    // document onReady

    for (var i=0; i<destinations.length; i++){
        // add the label:
        $('#checkbox_container').append('<label for="' + destinations[i].label + '">Link #' + i + '</label>');

        // add the checkbox:
        $('#checkbox_container').append('<input type="checkbox" id="'+ destinations[i].label+'" value="' + destinations[i].value + '" >');
    }
});

$("#open_link").click(function() {
    performOpenLink();
});

function performOpenLink(){
    $("input[type=checkbox]").each(function() {
        if (this.checked) {
            window.open(this.value)
        }
    });
}

This will loop through the array and build the label and checklist html based on properties of each array item. By placing the values into an array, it should be easier for you to add (or remove) new Checklist values later

Here's a jsFiddle

Update: I fixed the issue where I left this in the code. Replaced with destinations[i]

edited Jun 19, 2015 at 5:20

answered Jun 19, 2015 at 3:41

jasonscript

6,2063 gold badges30 silver badges46 bronze badges

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

1 Comment

RZ123 Over a year ago

Thank you! This is along the lines of what I was searching for

choz · Accepted Answer · 2015-06-19 04:03:48Z

0

Here's another approach...

$("#open_link").click(function(e) {
    e.preventDefault();
    $.each($("input[type=checkbox]:checked"), function(index, item){
        window.open( item.value, index );
    });
});

and this is the fiddle

It doesn't open multiple tabs in chrome, but it works perfectly in firefox(v38.0 for me)..

answered Jun 19, 2015 at 4:03

choz

18k5 gold badges58 silver badges76 bronze badges

1 Comment

RZ123 Over a year ago

It's an ad block/pop up blocker issue, but that's something else I need to figure out how to fix :S

Collectives™ on Stack Overflow

JavaScript & Checkboxes - More efficient way of storing values of each checkbox?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related