How to make checkbox items returned hyperlinks

Question

I got it to return what is checked, but I can't figure out how to get the values returned to be hyperlinks as well so you can actually click "housing" and it will open a new tab for that page.

My html for the checkboxes:

 <form id="resources">
     <label><input type="checkbox" value="Housing" name="rsc">Housing</label><br/>          
     <label><input type="checkbox" value="Library" name="rsc">Library</label><br/>              
     <label><input type="checkbox" value="Parking" name="rsc">Parking</label><br/>              
 </form>
 <button type="button">Show Resource(s)</button>

jQuery:

 $(document).ready(function() { 
    $("button").click(function(){

        var resource = [];
        $.each($("input[name='rsc']:checked"), function(){            
            resource.push($(this).val());
        });
        alert("Click selections for more info: " + resource.join(", "));
    });
});

If you want to open a new page when someone clicks Housing … why are you using a checkbox in the first place? Just make it a link from the outset. — Quentin, Apr 04 '16 at 08:41
`$.each($("input[name='rsc']:checked"), function() { ... })` is an awkward and non-idiomatic way to write `$("input[name='rsc']:checked").each(function() { ... })` — T.J. Crowder, Apr 04 '16 at 08:47

score 0 · Answer 1 · answered Apr 04 '16 at 08:45

Use window.location

$(document).ready(function() { 
    $("button").click(function(){

        var resource = [];
        $("input[name='rsc']:checked").each(function(){            
            resource.push($(this).val());
        });
        window.location = 'http://yourserver.com?q='+resource.join('+');//change the url to your case
    });
});

or if you want the data to be presented in the same page use ajax

score 0 · Answer 2 · edited May 23 '17 at 11:50

0

I think this post will help: How to redirect to another webpage in JavaScript/jQuery?

Maybe, something like this:

 $(document).ready(function() {
   $("button").click(function() {
     var resource = [];
     $.each($("input[name='rsc']:checked"), function() {
       resource.push($(this).val());
     });
     window.location.href = "http://" + resource;
   });
});

edited May 23 '17 at 11:50

Community

1
1

answered Apr 04 '16 at 08:53

Carlos Filipe Sousa Pinho

1

@madalinivascu: Well, it'll implicitly do a `.join(",")` and so you'll get `http://Housing,Library`. So you can't *usefully* just drop an array into a URL like that. :-) – T.J. Crowder Apr 04 '16 at 09:07
@T.J.Crowder if your useful curiosity is serving you well you should look at my answer :) – madalinivascu Apr 04 '16 at 09:13

How to make checkbox items returned hyperlinks

2 Answers2