Javascript Get All Checked Checkboxes Values Example

Jul 05, 2021 . Admin

Hello Friends,

Now let's see example of how to get all checkboxes checked example. We will use how to get all checkboxes checked in javascript. Here you will learn how to use javascript get all checkboxes checked. This is a short guide on get all checkboxes checked. Let's get started with how to get all checkboxes checked in javascript.

Here i will give you many example how you can get all checkboxes checked javascript.

Example : 1
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>How To Get All Checkboxes Checked in JavaScript?</title>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
	</head>
	<body>
		<div class="container mt-5">
			<div class="row">
				<div class="col-md-6 offset-md-3">
					<div class="card">
						<div class="card-header">
							<h3>How To Get All Checkboxes Checked</h3>
						</div>
						<div class="card-body">
							<p>Tick the all checkboxes and check all values show in console.</p>	
							<div id="company">
							  	<input type="checkbox" name="check" value="55" />
							  	<input type="checkbox" name="check" value="90.2" />
							  	<input type="checkbox" name="check" value="99" />
							  	<input type="checkbox" name="check" value="80.21" />
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		$('#company').change(function() {
		  	var values = 0.00;
		  	{
		    	$('#company :checked').each(function() {
		      		values=values+parseFloat(($(this).val()));
		    	});
		    	console.log( parseFloat(values));
		  	}
		});
	</script>
</html>
Output : 
(1)80.21
(2)170.41
(3)225.40999999999997
(4)324.40999999999997
Example : 2 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JavaScript Get All Checked Checkboxes Value</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    </head>
    <body>
        <div class="container mt-5">
            <div class="row">
                <div class="col-md-6 offset-md-3">
                    <div class="card">
                        <div class="card-header">
                            <h5>Select your favourite company :</h5>
                        </div>
                        <div class="card-body">
                            <p>Choose your Subject :</p>
                            <div>
                                <input type="checkbox" id="Laravel" name="subject" value="Laravel" checked>
                                <label for="Laravel">Laravel</label>
                            </div>
                            <div>
                                <input type="checkbox" id="J2EE" name="subject" value="J2EE">
                                <label for="J2EE">J2EE</label>
                            </div>
                            <div>
                                <input type="checkbox" id="PHP" name="subject" value="PHP">
                                <label for="PHP">PHP</label>
                            </div>
                            <div>
                                <input type="checkbox" id="JS" name="subject" value="JS">
                                <label for="JS">JS</label>
                            </div>
                            <div>
	                            <button id="select" class="btn btn-success">Submit</button>
                            </div>
                            <div id="result"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            function append_to_div(div_name, data){
                document.getElementById(div_name).innerText += data;
            }
            document.getElementById('select').onclick = function() {
                var checkboxes = document.getElementsByName('subject');
                for (var checkbox of checkboxes)
                {
                   if (checkbox.checked) {
                        append_to_div("result", checkbox.value + ', ');
                    }
                }
            }
    	</script>
    </body>
</html>
Output : 
(1)["4"]
(2)["4", "3"]
(3)["4", "3", "1"]
(4)["4", "3", "1", "5"]

It will help you...

#Javascript

You might also like...