Checkbox value showing using JavaScript

Question

I want to show my checkbox value when I check it, but my code show only one value.

For example if I check 1st checkbox it show it's value at that time. If I check 2nd checkbox then it's value will display beside previous value.

What should I do?

<script> function test(item) { var result = $('#val').val(); $('#course').html(result); } </script> <html> <div id="show"> <span id="course"> </span> </div> <input type="checkbox" id="val" value="20" onclick="test()" />20 <br /> <input type="checkbox" id="val" value="30" onclick="test()" />30 <br /> <input type="checkbox" id="val" value="40" onclick="test()" />40 <br /> </html>

change $('#course').html(result); to $('#course').append(result); also you this context and to get current checkbox. — guradio
– guradio, Commented Dec 19, 2016 at 6:43

Chetan · Accepted Answer · 2016-12-19 06:49:22Z

Please note -

You should have to use unique id
my suggestion is use class instead

Please refer this, i hope will be useful to you

$(document).ready(function(){ $('.chk_val').on('click',function(){ var result = $(this).val(); $('#course').append(result); }); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="show"> <span id="course"> </span> </div> <input type="checkbox" class="chk_val" value="20" />20 <br /> <input type="checkbox" class="chk_val" value="30" />30 <br /> <input type="checkbox" class="chk_val" value="40" />40 <br />

Thanks. when i uncheck it. It will append value . I want to remove that.

Pawan · Accepted Answer · 2016-12-19 09:28:36Z

 $('input[data-action="data-click"]').on("click", function() { if($(this). prop("checked")==true){ var dataDisplay = "<span id='" + this.value + "'>" + this.value + "</span>"; $('div#show').append(dataDisplay + " ") } else { $("#" + this.value).remove(); } });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="show"> </div> <input type="checkbox" value="20" data-action="data-click" />20 <br /> <input type="checkbox" value="30" data-action="data-click" />30 <br /> <input type="checkbox" value="40" data-action="data-click" />40 <br />

Thanks. when i uncheck it. It will append value . I want to remove that.

Mairaj Ahmad · Accepted Answer · 2016-12-19 06:44:22Z

You have given same id to every checkbox so javascript finds only the first checkbox and shows its value.

You can send the clicked checkbox to the function and get its value

<div id="show"> <span id="course"> </span> </div> <input type="checkbox" id="val" value="20" onclick="test(this)" />20 <br /> <input type="checkbox" id="val2" value="30" onclick="test(this)" />30 <br /> <input type="checkbox" id="val3" value="40" onclick="test(this)" />40 <script> function test(item) { var result = $(item).val(); $('#course').html(result); } </script>

guradio · Accepted Answer · 2016-12-19 06:44:59Z

function test(element) { var result = $(element).val(); $('#course').append(result); }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="show"> <span id="course"> </span> </div> <input type="checkbox" id="val" value="20" onclick="test(this)" />20 <br /> <input type="checkbox" id="val" value="30" onclick="test(this)" />30 <br /> <input type="checkbox" id="val" value="40" onclick="test(this)" />40 <br />

Change $('#course').html(result); to $('#course').append(result);
Use this context and to get current checkbox

Thanks. when i uncheck it. It will append value . I want to remove that.

Pranav C Balan · Accepted Answer · 2016-12-19 06:45:30Z

First of all, id attribute should be unique you need to always use class attribute for a group of elements.

For referring the clicked element pass this as click handler argument.

<script> function test(item) { document.getElementById('course').innerHTML = item.value; } </script> <html> <div id="show"> <span id="course"> </span> </div> <input type="checkbox" value="20" onclick="test(this)" />20 <br /> <input type="checkbox" value="30" onclick="test(this)" />30 <br /> <input type="checkbox" value="40" onclick="test(this)" />40 <br /> </html>

Sudharsan S · Accepted Answer · 2016-12-19 06:45:58Z

Use class instead of id and bind the click event for class

$('.val').click(function() { $("#course").html($(this).val()); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html> <div id="show"> <span id="course"> </span> </div> <input type="checkbox" class="val" value="20" />20 <br /> <input type="checkbox" class="val" value="30" />30 <br /> <input type="checkbox" class="val" value="40" />40 <br /> </html>

Nitheesh · Accepted Answer · 2016-12-19 06:49:32Z

Try this one. Pass the item to the function and display the value of item. I have attached the sample code snippet.

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script> <script> function test(item) { var result = item.value; $('#course').html(result); } </script> <html> <div id="show"> <span id="course"> </span> </div> <input type="checkbox" id="val" value="20" onclick="test(this)" />20 <br /> <input type="checkbox" id="val" value="30" onclick="test(this)" />30 <br /> <input type="checkbox" id="val" value="40" onclick="test(this)" />40 <br /> </html>

Rasha Ahamed · Accepted Answer · 2016-12-19 08:30:11Z

In the first Place you should never use same ID "val" to all the Check boxes you have Classes for that. This is just a modification to previously entered code, to let you know that you don't have to pass the whole this Object to your function rather you can directly pass the value like this.value

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script> <script> function test(item) { var result = item; $('#course').html($('#course').html()); } </script> <html> <div id="show"> <span id="course"> </span> </div> <input type="checkbox" value="20" onclick="test(this.value)" />20 <br /> <input type="checkbox" value="30" onclick="test(this.value)" />30 <br /> <input type="checkbox" value="40" onclick="test(this.value)" />40 <br /> </html>

Hope that this helped you.

Collectives™ on Stack Overflow

Checkbox value showing using JavaScript

8 Answers 8

1 Comment

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

1 Comment

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Comments

Related