$('input[name="accounts"]').on('click', function() {
$('input[name="accounts"]:checked').each(function() {
if (index == 0) {
txt = $(this).val();
$("#accounts-text").html(txt);
} else {
$("#accounts-text").append(txt);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><b>Accounts</b></label><br>
<input type="checkbox" name="accounts" value="Gmail"> Gmail
<br>
<input type="checkbox" name="accounts" value="Facebook"> Facebook
<br>
<input type="checkbox" name="accounts" value="Instagram"> Instagram
<br>
<div class="form-group">
<label>Accounts: </label>
<h5 id="accounts-text"></h5>
</div>
In the above code,help me to find out the error while trying to display the check box values on select in the same page.
You can use map()
and get()
to get all values. This will return the array of all checked values. Use join()
to convert the array into string.
$('input[name="accounts"]').on('click', function() {
var result = $('input[name="accounts"]:checked').map(function() {
return this.value;
}).get();
$("#accounts-text").html(result.join("<br />"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><b>Accounts</b></label><br>
<input type="checkbox" name="accounts" value="Gmail"> Gmail
<br>
<input type="checkbox" name="accounts" value="Facebook"> Facebook
<br>
<input type="checkbox" name="accounts" value="Instagram"> Instagram
<br>
<div class="form-group">
<label>Accounts: </label>
<h5 id="accounts-text"></h5>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With