// Declare the array and define it's values
var myarray = ['Cat', 'Dog', 'Fish'];
// Display the return value of each jQuery function
// when a radio button is selected
$('input:radio').change( function() {
// Get the value of the selected radio
var selectedItem = $('input:radio[name=arrayItems]:checked').val();
$('.item').text( selectedItem );
// Calculate and display the index of the selected item
$('#indexVal').text( myarray.indexOf(selectedItem) );
// Calculate and display the $.inArray() value for the selected item
$('#inArrVal').text( $.inArray(selectedItem, myarray) );
// Calculate and display the .includes value for the selected item
$('#includeVal').text( myarray.includes(selectedItem) );
});
#results { line-height: 1.8em; }
#resultLabels { width: 14em; display: inline-block; margin-left: 10px; float: left; }
label { margin-right: 1.5em; }
.space { margin-right: 1.5em; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Click a radio button to display the output of
<code>$.inArray()</code>
vs. <code>myArray.indexOf()</code>
vs. <code>myarray.includes()</code>
when tested against
<code>myarray = ['Cat', 'Dog', 'Fish'];</code><br><br>
<label><input type="radio" name="arrayItems" value="Cat"> Cat</label>
<label><input type="radio" name="arrayItems" value="Dog"> Dog</label>
<label><input type="radio" name="arrayItems" value="Fish"> Fish</label>
<label><input type="radio" name="arrayItems" value="N/A"> ← Not in Array</label>
<br><br>
<div id="results">
<strong>Results:</strong><br>
<div id="resultLabels">
myarray.indexOf( "<span class="item">item</span>" )<br>
$.inArray( "<span class="item">item</span>", myarray )<br>
myarray.includes( "<span class="item">item</span>" )
</div>
<div id="resultOutputs">
<span class="space">=</span><span id="indexVal"></span><br>
<span class="space">=</span><span id="inArrVal"></span><br>
<span class="space">=</span><span id="includeVal"></span>
</div>
</div>
if jQuery.inArray('test', myarray) isn't -1