I current have a list of items being pulled through in a Content Query Web Part.

Onload, I would like to display the items from today onwards, and for this to be a radio button selected onload.

The other radio button option is to display items from yesterday backwards.

Using jQuery, how could i define this approach?


<div id="filter-items-view">
<input id="upcoming-radio" type="radio" name="Upcoming">Upcoming</input>
<input id="recent-radio" type="radio" name="Recent">Recent</input>

I'm stuck on two things. The first being how to click a radio button on and off (i have two, that when click, they are both selected, probably due to the fact the jquery isn't assisting) and the second being the attribute used to define the items greater than and less than today.


Your radio buttons are part of two different groups which is why they act independently. This is just plain HTML, give them the same name and they be part of a group and work the way you expect.

This may be beneficial, it is similar to what you are trying to do. Excerpt original posted by Maxime Soucy at NothingButSharePoint:

$(document).ready(function() {
// Table of my link list. Obviously we reference the class and not the id. 
var list = $("table.ms-listviewtable");

// Table row of the items in my list.
var listItems = $("table.ms-listviewtable tr:not(.ms-viewheadertr)");

// Our filter input.
 var input = $("input#filterInput");

input.keyup(function() // On key presses
  listItems.each(function() // for each items in our list
  var text = $(this).text().toLowerCase(); // get all the text values of that list item

if (text.indexOf(input.val()) != -1) // does it match the text of our filter?
  $(this).show();// yes! show it!
  $(this).hide(); // nope! hide it!

The above will only filter what you have loaded on a page. If you want to use more than that you can use something like SPservices (or the CSOM/Rest API's), or even just the OOB method of connected web parts for list filtering.


you can check this out, as explained use Div elements that you can then show/hide from the radio button selection :)

$(document).ready(function() {
    $("input[name$='from']").click(function() {
        var test = $(this).val();
        $("#c" + test).show();


hope it helps :)

  • Thanks for the response! I've added some code into the original post. I have a CQWP that's displaying all items. When clicking recent, I want all previous items before today to show and hide everything else. When clicking upcoming, I want everything from today forward to show.. – Tron Jan 18 '13 at 9:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.