CODEWITHSUNDEEP
javascriptjquerycheckbox
Felipe S. Bueno
Felipe S. Bueno

Reputation: 99

Append one by one in input text from checkboxes

I have a jQuery script that appends all checkboxes values into one <input type="text"/> with ',', but when I check one box, it appends all the values from the others checkboxes aswell, and I want only to append those I checked in sequence.

$('.check_list').on('change', function() {
  var n = $(this).siblings('input:checkbox');
  var nControl = $('.codeParc');

  if ($(this).prop('checked')) {
    n.prop('checked', true);
    var vals = nControl.map(function() {
      return $(this).val();
    }).get().join(',');

  } else {
    n.prop('checked', false);
  }
  $('#test').val(vals);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input style="cursor: pointer;" type="checkbox" value="" class="check_list"></input>
<input type="checkbox" class="codeParc" value="1"></input>
<input type="checkbox" class="codeParc" value="2"></input>
<input type="checkbox" class="codeParc" value="3"></input>

<input type="text" id="test" value=""></input>

This code is returning me all values 1,2,3 whenever I check one checkbox, what I need is to check one box and display only his number, and then append the rest when they are checked.

Upvotes: 1

Views: 182

Answers (3)

Vivek Pipaliya
Vivek Pipaliya

Reputation: 498

You want like this?

$('.check_list').on('change', function () {
    var n = $(this).siblings('input:checkbox');
    var nControl = $('.codeParc');

    if ($(this).prop('checked')) {
       // n.prop('checked',true);
        var vals = nControl.map(function () {
            if($(this).prop('checked'))
            {
            	return $(this).val();
            }
            else
            {
            	return;
            }
        }).get().join(',');

    } else {
      //  n.prop('checked',false);
    }
    $('#test').val(vals);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input style="cursor: pointer;" type="checkbox" value="" class="check_list"></input>
<input type="checkbox" class="codeParc" value="1"></input>
<input type="checkbox" class="codeParc" value="2"></input>
<input type="checkbox" class="codeParc" value="3"></input>

<input type="text" id="test" value=""></input>

Upvotes: 0

Steeve Pitis
Steeve Pitis

Reputation: 4443

Is it what you want ?

$('input:checkbox').on('change', function () {
  // toggle all checkbox
  if($(this).hasClass('check_list')){
    $('.codeParc').prop('checked', $(this).prop('checked'));
  }
  
  var vals = $('.codeParc:checked').map(function () {
       return $(this).val();
  }).get().join(',');
  $('#test').val(vals);
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input style="cursor: pointer;" type="checkbox" value="" class="check_list"></input>
<input type="checkbox" class="codeParc" value="1"></input>
<input type="checkbox" class="codeParc" value="2"></input>
<input type="checkbox" class="codeParc" value="3"></input>

<input type="text" id="test" value=""></input>

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337560

Firstly note that input elements are self-closing, so its <input />, not <input></input>.

A simpler way to do this would be to map the selected values in to an array and update the text of the input with the values from that array each time a checkbox is clicked, something like this:

$('.check_list').change(function() {
  $('.codeParc').prop('checked', this.checked);
  updateText();
});

$('.codeParc').change(function() {
  $('.check_list').prop('checked', $('.codeParc').length == $('.codeParc:checked').length);
  updateText();
});

function updateText() {
  var checkedValues = $('.codeParc:checked').map(function() {
    return this.value;
  }).get();
  $('#test').val(checkedValues.join(','));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input style="cursor: pointer;" type="checkbox" value="" class="check_list" />
<input type="checkbox" class="codeParc" value="1" />
<input type="checkbox" class="codeParc" value="2" />
<input type="checkbox" class="codeParc" value="3" />
<input type="text" id="test" value="" />

Upvotes: 2

Related Questions