ansaurus

Question

Answer 1

+2 A:

Partially from W3Schools. This file will crate a single checkbox and check it depending on the http://example.com/index.html?j=? URL

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<script type="text/javascript">
function getUrlVars()
{
  var vars = [], hash;
  var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');

  for(var i = 0; i < hashes.length; i++)
  {
    hash = hashes[i].split('=');
    vars.push(hash[0]);
    vars[hash[0]] = hash[1];
  }
  return vars;
}

function doStuff()
{
  var GETVars = getUrlVars();
  if (GETVars['j']==1)
  {
    document.getElementById("myCheck").checked=true;
  }
}
</script>

<body onload="doStuff();">
  <form>
    <input id='myCheck' type="checkbox" />
  </form>
</body>
</html>

Grant 2009-01-28 16:24:28

Answer 2

A:

First, you need to extract your parameters from URL. Here's a good way to do it.

Then, set the check box using 'checked' property:

domelement.checked = true;

buti-oxa 2009-01-28 16:39:22

Answer 3

A:

nezroy 2009-01-28 16:40:54

unescape is deprecated. You should use decodeURIComponent instead.

Ates Goral 2009-01-28 17:18:44

Answer 4

+1 A:

Try this, remember that this code doesn't deal with malformed query strings.

function GetQueryStringParams() 
{
  var queryString = window.location.search.substring(1);
  var params = queryString .split('&');
  for (var i=0; i < params.length; i++) 
  {
    var pos = params [i].indexOf('=');
    if (pos > 0) 
    {
      var key = params [i].substring(0,pos);
      var val = params [i].substring(pos+1);

      switch(val) 
      {     
        case "1":
          document.getElementById(key).checked=true;
          break;
        case "0":
          document.getElementById(key).checked=false;
          break;
       }
    }
  }
}

Phaedrus 2009-01-28 16:42:05

Consider: document.getElementById(key).checked = val == "1";

Ates Goral 2009-01-28 17:19:54

Although your suggestion may provide a more succinct solution, it reduces readability.

Phaedrus 2009-01-28 17:29:39

Answer 5

+2 A:

function decode(s) {
    return decodeURIComponent(s).replace(/\+/g, " ");
}

function getQueryParams() {
    var query = {};

    document.location.search.replace(
        /\??(?:([^=]+)=([^&]*)&?)/g,
        function () {
            query[decode(arguments[1])] = decode(arguments[2]);
        });

    return query;
}

window.onload = function () {
    var query = getQueryParams();

    // check the checkboxes, assuming their ids are query param names
    var inputs = document.getElementsByTagName("input");

    for (var i = 0; i < inputs.length; i++) {
        var el = inputs[i];
        if (el.getAttribute("type") == "checkbox"
            && el.id in query) {
            el.checked = query[el.id] == "1";
        }
    }
};

And if you're using jQuery, it's much more concise:

$(document).ready(function () {
    $("input[type=checkbox]").each(function () {
        this.checked = new RegExp("(\\?|&)" + this.id + "=1")
            .test(document.location.search);
    });
});

Replace this.id with this.name if you want to refer to the check boxes by their names instead of ids.

Ates Goral 2009-01-28 16:47:43

ansaurus

tags:

views:

answers:

Changing checkboxes using Javascript

related questions