How to replace input values with new values accordingly in jquery

Question

just want to ask if how can I set a default values according to the number of checkboxes available. For example I have 3 checkboxes and I want to have a default values of 0,0,0 since I have 3 checkboxes. And if the user click the first checkbox the first 0 will be replaced with 1 since the value of the first checkbox has a value of 1 and the same as the rest checkboxes. And if the user uncheck the first checkbox it will return to it's default value which is 0. I have embedded my snippet. Thank you guys in advance.

$('input#category').on('change', function () {
        var selectedCategories = $('.category:checkbox:checked').map(function () {
            return this.value;
        }).get();
        $('#post_category').val(selectedCategories);

    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" value="1" id="category" name="category" class="category category_1">Category 1
<input type="checkbox" value="2" id="category" name="category" class="category category_2">Category 2
<input type="checkbox" value="3" id="category" name="category" class="category category_3">Category 3
<br />
<h5>Result:</h5>
<input type="text" id="post_category">

You should have html elements with unique id attribute.. Check that id="category" is multiple times — Yosvel Quintero
– Yosvel Quintero, Commented Oct 4, 2016 at 11:35

Yosvel Quintero · Accepted Answer · 2016-10-04 12:10:42Z

1

Check that in your code you have multiple elements with the same id and name attributes and should be unique.

On the change event handler there is no need to make a map/iterate over all the checked checkbox inputs because the changed element checkbox have properties value and checked:

var arr = [0, 0, 0],
    setPostCategory = function() {
      arr[this.value - 1] = (this.checked) ? this.value : 0;
      $('#post_category').val(arr.join(', '));
    };

$('input.category').on('change', setPostCategory);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<input type="checkbox" value="1" name="category1" class="category">Category 1
<input type="checkbox" value="2" name="category2" class="category">Category 2
<input type="checkbox" value="3" name="category3" class="category">Category 3

<br>

<h5>Result:</h5>
<input type="text" id="post_category" value="0, 0, 0">

edited Oct 4, 2016 at 12:10

answered Oct 4, 2016 at 11:47

Yosvel Quintero

19.1k5 gold badges39 silver badges47 bronze badges

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

Comments

adeneo · Accepted Answer · 2016-10-04 12:35:46Z

0

You're already doing it, just check if the boxes are checked inside the mapping

var elems = $('.category[type="checkbox"]').on('change', function() {
    var selectedCategories = elems.map(function() {
        return this.checked ? +this.value : 0;
    }).get();

    $('#post_category').val(selectedCategories);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" value="1" id="category1" name="category" class="category category_1">Category 1
<input type="checkbox" value="2" id="category2" name="category" class="category category_2">Category 2
<input type="checkbox" value="3" id="category3" name="category" class="category category_3">Category 3
<br />
<h5>Result:</h5>
<input type="text" id="post_category">

Note the selector change. You can have the same classname for all three inputs, but they can not have the same ID, as ID's are unique

edited Oct 4, 2016 at 12:35

answered Oct 4, 2016 at 11:36

adeneo

319k29 gold badges410 silver badges392 bronze badges

3 Comments

johnlopev Over a year ago

Thank you for this wonderful one. It's working now! Thanks a lot!

Yosvel Quintero Over a year ago

@johnlopev: No need to make a map/iterate over all the checked checkbox inputs because the changed element checkbox have properties value and checked.. Check my answer

Yosvel Quintero Over a year ago

These answer is wrong: Not fixed the multiple elements with the same id attribute... and also is setting 1 on the event handler but should be the value of the element according to the question

Ali Raza · Accepted Answer · 2016-10-04 11:36:40Z

0

$('#post_category').empty();

$('#post_category').val(selectedCategories);

answered Oct 4, 2016 at 11:36

Ali Raza

93 bronze badges

Collectives™ on Stack Overflow

How to replace input values with new values accordingly in jquery

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related