Skip to content Skip to sidebar Skip to footer

Display Checkbox Value In Textbox In The Order Of Click

Hi I am new to Javascript my query is How to Display the value of Check Box in the order of user clicked Suppose i have Apple Orange Pineapple Mango when user click the follow

Solution 1:

Here's an example of how you could do it. Live demo (click).

Markup:

  <div id="inputs">
    <input type="checkbox" value="Apple">
    <input type="checkbox" value="Orange">
    <input type="checkbox" value="Pineapple">
    <input type="checkbox" value="Mango">
  </div>
  <ul id="results"></ul>

JavaScript:

$('#inputs input').change(function() {
  $li = $('<li></li>');
  $li.text(this.value);
  $('#results').append($li);
});

If you want to remove items when they're unchecked and prevent duplicates, you could do this: Live demo (click).

$('#inputs input').change(function() {
  if (this.checked) {
    $li = $('<li></li>');
    $li.text(this.value);
    $('#results').append($li);
  }
  else {
    $('li:contains('+this.value+')', '#results').remove();
  }
});

Post a Comment for "Display Checkbox Value In Textbox In The Order Of Click"