how to show sequential results inside textfield

Question

dear all.I want to use only one textfield for different results. what should I do if I want after pressing a few times a checkbox or another checkbox the results will appear sequentially in the textfield.for example:

<input type="checkbox" id="see" value="a">
<input type="checkbox" id="saw" value="b">

<input type="text" id="field">
<input type="button" id="show">

then i do something like:

 1. click "see"
 2. click "show"
 3. click "see"
 4. click "show"
 5. click "saw"
 6. click "show"
 7. click "saw"
 8. click "show"
 9. click "see"
 10. click "show"

then show results after click show button at text field:

aaba..and so on if any additional

When you get `see` twice in a row, are you checking, unchecking, then rechecking it? — Peter Ajtai, Sep 01 '10 at 05:20
no i click show button to show result.if i want to rechecking then show result i must click the show button again. — klox, Sep 01 '10 at 05:24

Garis M Suero · Accepted Answer · 2010-09-01T05:45:32.800

As simple as:

var values = "";
$('#see, #saw').click(function() {
  values += $(this).val();
});
$('#show').click(function() {
  $("#field").val(values);
});

to only allow the checked=true checkboxes just:

var values = "";
$('#see, #saw').click(function() {
 if($(this).is(':checked'))
    values += $(this).val();
});
$('#show').click(function() {
  $("#field").val(values);
});

Edited: to add the functionality to the Show Button

See working fiddle

score 1 · Answer 2 · answered Sep 01 '10 at 05:28

Try something like this:

$('input:checkbox').click(function() {
  $('#field').val($('#field').val() + $(this).val());
});

Here's a working fiddle.

If you need a variant where you only record the clicks that create a checked state, just wrap the assignment in:

if( $(this).is(':checked') ) {...}

how to show sequential results inside textfield

2 Answers2