CODEWITHSUNDEEP
javascriptjquery
Yunowork
Yunowork

Reputation: 345

Change href depending on checkboxes

I wrote a small script which should change the URL depending on what checkboxes are active. The 'issue' here is that there are special cases, the variables 'one' and 'two' have a comma when the href is 'one,two,three', but if only checkbox 'two' is checked the href should also just be 'two' without comma. I get this working more or less with the slice function.

Is there a better way to write this in a function and save x lines of code?

DEMO: http://jsfiddle.net/UKD2m/

var one ="111,";
var two ="222,";
var three ="333";

$('body').append('<a href=\"' + one + two + three + '\">link</a>'); //this is the default value

$('.checkbox').change(function() {
  if ($('#one').is(':checked')) { // one only + slice out last character (comma)
    $("a").attr("href", one.slice(0,-1));
  }
  if ($('#one').is(':checked') && $('#two').is(':checked')) { //one and two
    $("a").attr("href", one + two);
  }
  if ($('#one').is(':checked') && $('#three').is(':checked')) { //one and three
    $("a").attr("href", one + three);
  }
  if ($('#two').is(':checked')) { // two only + slice out last charachter (comma)
    $("a").attr("href", two.slice(0,-1));
  }
  if ($('#two').is(':checked') && $('#three').is(':checked')) { // two and three
    $("a").attr("href", two + three);
  }
  if ($('#three').is(':checked')) { // three only
    $("a").attr("href", three);
  }
  if ($('#one').is(':checked') && $('#two').is(':checked') && $('#three').is(':checked')) { // three only
    $("a").attr("href", one + two + three);
  }
});

Upvotes: 1

Views: 1426

Answers (3)

talemyn
talemyn

Reputation: 7950

I'd definitely drive the href values off of the value attributes of the checkbox options, if you are free to do that. First, you would have to set up your checkboxes to have the values associated with them:

<input class="checkbox" id="one" type="checkbox" checked value="111">one<br />
<input class="checkbox" id="two" type="checkbox" checked value="222">two<br />
<input class="checkbox" id="three" type="checkbox" checked value="333">three<br />

I would also just go ahead and default the link in the HTML, to begin with, if that's possible:

<a href="111,222,333">link</a>

Then, you could reduce your JS, so that, every time one of the checkboxes is changed, it will look at the group, identify which ones are currently selected, and then join the values of those selected ones into a single string:

$(document).ready(function() {
    $('.checkbox').on("change", function() {
        var aHrefVals = [];

        $('.checkbox').filter(":checked").each(function() {
            aHrefVals.push($(this).val());
        });

        $("a").attr("href", aHrefVals.join(","));
    });
});

Upvotes: 2

Sam Hanley
Sam Hanley

Reputation: 4755

Here's a working answer I came up with -- you just overcomplicated it by hard-coding the commas in to the strings. Just check if each one is checked, and if it is, check if there's already been one checked. If so, add a comma, and then add the checked value. After only three if statements you'll have your string!

var one ="111";
var two ="222";
var three ="333";

$('body').append('<a href=\"' + one + "," + two + "," + three + '\">link</a>'); //this is the default value

$('.checkbox').change(function() {
    var href = "";
    if ($('#one').is(':checked')) {
        href = one;
    }
    if ($('#two').is(':checked')) { 
        href += (href != "") ? "," + two : two;
    }
    if ($('#three').is(':checked')) {
        href += (href != "") ? "," + three : three;
    }
    $("a").attr("href", href);
});

Upvotes: 1

AndreDurao
AndreDurao

Reputation: 5795

Something like that... see it at: http://jsfiddle.net/gh64L/3/

function getATxt(){
    var ary = [];
    $("input[type='checkbox']:checked").each( function(){
        ary.push($(this).data("href"));
    });
    $("a#mylink").attr("href", ary.join(","));
}
$('.checkbox').change(function() {
  getATxt();
});
//@ startup
getATxt();

Upvotes: 0

Related Questions