auto checkbox based from url value using javascript/jQuery

Question

Is there way to or it is possible to do it using javascript/jQuery?

Based Link URL: first one will check Type A and Type B and second example will check Type D

?type=A&type=C or ?type=D

My current form:

<form name="input" action="" method="post" ><br />
Select Type: <br />
<input type="checkbox" name = "type" value="A" /> A <br />
<input type="checkbox" name = "type" value="B"  /> B <br />
<input type="checkbox" name = "type" value="C"  /> C <br />
<input type="checkbox" name = "type" value="D" /> D <br /> <br />
<input type="submit" value="Submit" />

Any tips and advised to do it?

Answer 1

Do it like this:

var i = document.location.href.lastIndexOf('?');
var types = document.location.href.substr(i+1).replace(/type=/g,'').split('&');
$('input[name="type"]').prop('checked',function(){
     return $.inArray(this.value,types) !== -1;
});

Explanation:

Consider the url is 'http://sample.com?type=A&type=C'. Then:

• i is the index of '?' sign in that url

• .substr() will cut type=A&type=C part from the url. After the cut, we will have this string:

  "type=A&type=C"
  

• .replace() removes "type=" parts from the above mentioned string:

  "A&C"   //after replace
  

• .split() splits that string into array:

   ["A","C"]
  

• $.inArray() checks whether value of current checkbox is in the ["A","C"] array. If it is, then checks( .prop('checked',true) ) the checkbox.

Answer 2

This question shows a solution to check the query string parameters using javascript. There is also a link at the top to a possible duplicate question that provides a solution using JQuery.

Once you determine the querty string parameters, you can use jQuery to check the box (as detailed in another question):

$('input[value="A"]').prop("checked", true);