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

1

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 />

answered Dec 19, 2016 at 6:49

Chetan

9425 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mithun Over a year ago

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

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

1

  $('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 />

edited Dec 19, 2016 at 9:28

answered Dec 19, 2016 at 7:19

Pawan

5651 gold badge7 silver badges19 bronze badges

1 Comment

Mithun Over a year ago

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

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

0

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>

answered Dec 19, 2016 at 6:44

Mairaj Ahmad

14.6k2 gold badges29 silver badges43 bronze badges

Comments

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

0

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

answered Dec 19, 2016 at 6:44

guradio

15.6k4 gold badges39 silver badges65 bronze badges

1 Comment

Mithun Over a year ago

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

0

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>

answered Dec 19, 2016 at 6:45

Pranav C Balan

115k25 gold badges172 silver badges195 bronze badges

Comments

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

0

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>

answered Dec 19, 2016 at 6:45

Sudharsan S

15.4k4 gold badges34 silver badges51 bronze badges

Comments

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

0

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>

answered Dec 19, 2016 at 6:49

Nitheesh

20.1k3 gold badges28 silver badges52 bronze badges

Comments

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

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

1 Comment

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related