Filter divs/table rows based on checkbox criteria -Javascript/JQuery

Please see: mycellula开发者_开发百科rcenter.com/phones

I want to duplicate this functionality in javascript/JQuery, but am not familiar enough with the language to even know what to look for.

By functionality, I mean the ability to select one or more of the items in the left column and have the content of the right-hand column show/hide to meet the selected checkbox criteria.

I can make rows/divs show/hide based on clicks on text in other columns, but not sure how to concatenate/iterate? through multiple selections.

Advice/help is appreciated.

JC

---

This is done with an ajax request

it grabs the form data, sends it via an ajax request to the server and the server processes the form data, performs the search in it's database and then returns either json or xml to the javascript which then dynamically builds each row for each item

---

You certainly do this with AJAX. Another alternative is to use the jQuery filter() function.

---

Doing it server side it's surely easier, but it's not a must, especially if you will not use very complex filters

Take a look at this jQuery plugin

http://plugins.jquery.com/project/uiTableFilter

---

What it looks like you would need to do is see when a checkbox has been changed, and reload the content (through ajax, with xml/html/json) into the div. http://jsfiddle.net/mazzzzz/ABk4R/6/ is the javascript I would use, and the php would be something like:

script.php

<?php
$firstcheckboxChecked = $_POST['1'];
if ($firstcheckboxChecked)
    echo 'crap because first checkbox was checked';
?>

Each checkbox is sent to the php in the $_POST variable, so checkbox <input type="checkbox" value="te" /> would be accessed with $_POST['te'] (which is true is the checkbox is checked, and false if not). Then the html generated by this page is put into the container div (replacing the old content in that div).

---

I recently did something like this, and was able to refactor it to what I believe you want. It's too detailed to explain in here, so check out the comments in the code, and this example:

http://jsbin.com/adaru3/edit