jQuery - How would you display / hide content with a radio button based on a date?

Question

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?

Thanks!

<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.

Answer 1

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!
}else{
  $(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.

Answer 2

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();
        $("div.desc").hide();
        $("#c" + test).show();
    });
});
</script>

https://stackoverflow.com/questions/7968555/radio-button-hide-and-show-form-content

hope it helps :)