/** * This function will assign a click event on the passed jQuery selector. * On each click, the function will toggle the CSS class selected_class. Then * the function will go over each element contained by the DOM selector and look * for an field with name=hidden_data_el in each element that has the * selected_class. Of these matching s, their values will be joined by * "," and the joined value stored in hidden_input (another hidden input field). * * If when this function is called, the hidden_input's value is not empty, this * function will attempt to preselect any elements matching that value. * * @param string selector Container that has the to toggle class * @param string selected_class Selected element class * @param string hidden_data_el Name of input element storing selected element's value * @param string hidden_input jQuery selector for input that stores all selected values */ function element_selector( selector, selected_class, hidden_data_el, hidden_input ) { var $ = jQuery; // Register click event $( selector ).click( function() { var data = new Array(); if( $( this ).hasClass( selected_class ) ) { // Element deselected, remove class $( this ).removeClass( selected_class ); } else { // Element selected, add class $( this ).addClass( selected_class ); } $( selector + '.' + selected_class ).each( function() { var item_val = $( this ).find( 'input[name="' + hidden_data_el + '"]:first' ).val(); data.push( item_val ); } ); $( hidden_input ).val( data.join() ); } ); // Check if hidden input has a preinitialized value var initial_val = $( hidden_input ).val(); if( initial_val != undefined && initial_val != '' ) { var data = initial_val.split( ',' ); // Turn each element of data into a jQuery selector $( data ).each( function( i, val ) { data[i] = 'input[name="' + hidden_data_el + '"][value="' + val + '"]'; } ); // Concatenate data into one long jQuery selector data = data.join(); // Assign the selected_class to all matching elements $( selector ).has( data ).addClass( selected_class ); } }