Getting jQuery to push a value from an ‘a’ link

Hoping this is fairly simple and I’ve just overlooked something…

I currently have a page with a bunch of checkbox options. Each checkbox will execute a very simple script adding its value to a string, where it then gets passed over to PHP to do the rest.

The html part for the checkboxes looks like this (repeated for multiple years):

<input type="checkbox" value="2017" class="value_year" onclick="filterdb()" />2017

And the script looks like this:

var year = [];
       
$('.value_year').each(function(){  
            if($(this).is(":checked"))  
            {  
                 year.push($(this).val());  
            }  
       });  

year = year.toString();

This works perfectly for a checkbox. However, I’m giving the site a makeover now and want to replace checkboxes with regular ‘a’ links, that I’ve styled up in CSS to look much prettier when selected/unselected. The problem is I can’t figure out how to replicate the behaviour of the script when clicking the link as opposed to checking a checkbox.

The html for the new link looks like this:

<a class='filter value_year' id='filter2017' value='2017' onclick='filterdb()' href='javascript:void(0);'>2017</a>

Is there a simple way to adapt the script to work here?

Many thanks

Answer

Don’t use an <a>nchor, value isn’t supported, it’s type of interaction is different than a form control, stick to what you already have. Just hide the checkboxes (they are pain to style) and add a <label> for each checkbox.

In the example below, each <label> is associated to the <input> positioned before it. When a <label> is associated with an <input>, the <label> becomes an extension to the <input> — clicking the <label> causes the associated <input> to act as it was clicked as well. This association is enabled by assigning the <label> the following:

<label for="ID_of_input_it_is_associated_with"></label>

The JavaScript can stay as it is, in the example, it is modified as an event handler for demo purposes, but there’s no harm in using it if it actually serves your purposes.

CSS has details commented in example. Note: hiding checkboxes and a few other rulesets are valid but they are not good for accessibility. Seeing that you’re new to this facet, that concern is probably not a factor yet.

let years = [];

$('.year').on('change', function() {
  years.length = 0;
  $('.year').each(function() {
    if ($(this).is(':checked')) {
      years.push($(this).val());
    }
  });
  console.log(years.toString());
});

/* ✣ Not good for accessability */
html {
  font: 2ch/1.25 Consolas
}

/* Each checkbox is hidden ✣ */
.year {
  display: none;
}

label {
  display: inline-block;
  font: inherit;
  margin: 2px;
  padding: 2px 4px;
  color: navy;
  border: 1px groove rgba(129, 129, 129, 0.3);
  border-radius: 6px;
  cursor: pointer;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
  /* 
  These two rules remove the
  highlighting for Chrome and
  Android ✣
  */
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/*
The "+" means apply styles to <label>
if there is a ".year" that is ":checked" 
positioned before it.
Google "adjacent sibling combinator"
*/
.year:checked+label {
  color: cyan;
  background: #000;
}

.year:checked+label:hover {
  color: lightblue;
  background: rgba(0,0,0,0.5);
}

label:hover,
label:active {
  color: white;
  background: rgba(51, 51, 51, 0.4);
}

label:active {
  transform: scale(0.90);
  transform-origin: center;
  transition: all 0.3s ease-out;
}

/* Remove Chrome blue outline ✣ */
:focus {
  outline: none !important;
}

/*
Demo purposes only -- styles for console
*/
.as-console-row::after { width: 0; font-size: 0; }
.as-console-row-code { width: 100%; word-break: break-word; }
.as-console-wrapper { max-height: 50% !important; max-width: 100%; }

<input id='chx1' class='year' type='checkbox' value='2017'>
<label for='chx1'>2017</label>

<input id='chx2' class='year' type='checkbox' value='2018'>
<label for='chx2'>2018</label>

<input id='chx3' class='year' type='checkbox' value='2019'>
<label for='chx3'>2019</label>

<input id='chx4' class='year' type='checkbox' value='2020'>
<label for='chx4'>2020</label>

<input id='chx5' class='year' type='checkbox' value='2021'>
<label for='chx5'>2021</label>

<input id='chx6' class='year' type='checkbox' value='2022'>
<label for='chx6'>2022</label>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>