Get count and values of checkbox on click of it in the textbox and on uncheck the value should be removed and count should decreased in textbox

Question

below is the html code i would like to get the values of checkboxes seperated with comma in the textbox of id='selchk' and get the count of checkbox clicked in textbox of id='getcnt' and on uncheck the value should be removed and count should be reduced using jquery.i have tried but didn't achieve the result.need help

<input type='checkbox' class='chk' value='1'>        
<input type='checkbox' class='chk' value='2'>       
<input type='checkbox' class='chk' value='3'>        
<input type='checkbox' class='chk' value='4'>        
<input type='checkbox' class='chk' value='5'>        
<input type='checkbox' class='chk' value='6'>           
<input type='text' class='getcnt' id='getcnt'>        
<input type='text' class='selchk' id='selchk'>

question is not up to the mark... what is "get the count of valuess" ??? — Parthi04, Dec 01 '14 at 07:13
total no of values in the textbox which are clicked by the user — curious2lrn, Dec 01 '14 at 07:20
http://jsfiddle.net/parthi04/rcfjuk1t/ check ..whether i got your points? — Parthi04, Dec 01 '14 at 07:23
no i want the values of checkbox in textbox(selchk) with comma seperated and on uncheck the values should be removed and the count means how much checkbox are selected in the textbox and count should reduce on uncheck and the value should be removed — curious2lrn, Dec 01 '14 at 07:29
What have you tried yet post your jsfiddle code link here let us see what you have done so far first ? @curious2lrn — Suraj Rawat, Dec 01 '14 at 07:30
@curious2lrn http://jsfiddle.net/parthi04/rcfjuk1t/1/ @ check this now — Parthi04, Dec 01 '14 at 07:35
@surajrawat http://jsfiddle.net/curious2lrn/fau16hyy/ this is the jsfiddle code i don't know much of jquery just tried no result — curious2lrn, Dec 01 '14 at 07:44
@Parthi04 thats correct just trying to understand the concept. can you explain? — curious2lrn, Dec 01 '14 at 07:57
This is join method http://www.w3schools.com/jsref/jsref_join.asp Array Map :http://stackoverflow.com/questions/17367889/array-map-concept — Parthi04, Dec 01 '14 at 08:01

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

1

JsFiddle

var total = 0;

$(".chk").click(function(){

  var output = $.map($('.chk:checked'), function(n, i){
    return n.value;
  }).join(',');

  total = $('.chk:checked').length;
  $("#getcnt").val(total);
  $("#selchk").val(output);
});

JsFiddle

edited Jun 20 '20 at 09:12

Community

1
1

answered Dec 01 '14 at 07:42

Parthi04

1,121
4
21
39

1

Nice use of the $.map(); – anthumchris Dec 01 '14 at 07:48
@Parthi04 my reputation is 1 can i mark it as an correct answer.if yes then how to mark it? – curious2lrn Dec 01 '14 at 11:45
@curious2lrn you will have a "Tick" mark below the upvote & downvote buton in my answer – Parthi04 Dec 01 '14 at 15:42

score 1 · Answer 2 · answered Dec 01 '14 at 07:45

CodePen Example

var $boxes = $('input[type=checkbox]'),
    $count = $('#getcnt'),
    $values = $('#selchk');

$boxes.click(function() {
    var values = [];
    var checked =0;
    $boxes.each(function() {
      if (this.checked) {
        values.push(this.value);
        checked++;
      }
    });
    $count.attr('value',checked);
    $values.attr('value',values.toString());
});

Get count and values of checkbox on click of it in the textbox and on uncheck the value should be removed and count should decreased in textbox

2 Answers2