Computer Magic Logo
Input selector

Thursday, January 12, 2017

Published by Aristotelis Pitaridis

When we work with input elements we may have to use a special selector in order to cover our needs. Below there are some examples of input selectors which may be needed in a project.

var elements1 = $(':input');                          // Select all input elements including: input, select, textarea, button, image, radio and more
var elements2 = $(':input[type="radio"]');            // Select all radio buttons
var elements3 = $('input[value^="Events"]');          // Select all input element whose value attribute begins with "Events" : <input type="button" value="Events - World" />
var elements4 = $('input[value$="Events"]');          // Select all input element whose value attribute ends with "Events" : <input type="button" value="World Events" />
var elements5 = $('input[value*="Events"]');          // Select all input element whose value attribute contains the value "Events" : <input type="button" value="World Events 2011" />

// Find the first input and get it's value. inputs[1] is an object and in order to be able to access it's properties we have to bound it inside $().
var inputs = $(':input');
var input = $(inputs[1]);

// Get an instance of each of the input elements
$(':input').each(function () {
    var element = $(this);
});