JSFiddle - React, Tailwind, and code Playground

by ChrisStanyon

HTML

<table>
<tr>
  <td><input type="checkbox" name="files[]" value="1" /></td>
  <td><input type="checkbox" name="files[]" value="2" /></td>
  <td><input type="checkbox" name="files[]" value="3" /></td>
  <td><input type="checkbox" name="files[]" value="4" /></td>
</tr>
</table>

<div class="form-group">
							<label>Selected files actions:</label>
								<div class="input-group input-group-sm">
									<select name="files_actions" id="files_actions" class="form-control">
										<option value="none">Select action</option>
										<option value="hide">Hide</option>
										<option value="show">Show</option>
										<option value="unassign">Unassign</option>
										<option value="none">Select action</option>
										<option value="delete">Delete</option>
									</select>
									<span class="input-group-btn">
										<button type="submit" name="do_action" id="do_action" class="btn btn-primary"> 
										<span class="glyphicon glyphicon-ok"></span>  
										Proceed</button>
									</span>
								</div><!-- input-group END -->
						</div>

JavaScript

$("#do_action").click(function() {
	var checks = $("td>input:checkbox").serializeArray(); 
  
  console.log(checks);

	if (checks.length == 0) { 
		alert('We have no checks');
	} else {
  	alert(checks.length + " tick boxes are selected");
  }
});