checkboxes checked based on input value

Question

i have four check-boxes and an input like that

<input type="text" value="" class=" windows ">

i have this input: 1010

after splitting i have 1, 0, 1, 0

i want to check if input is 1 then set checkbox checked, when 0 set the checkboxes unchecked. i have tried this:

$(':checkbox').prop('checked', this.checked);

but that making all checkboxes checked!
any ideas please.

Have you tried anything? Some code that you have that is not working as expected? — Calvin Nunes
– Calvin Nunes, Commented Sep 21, 2018 at 12:34
all my checkboxes have the same class, when i use this: $(':checkbox').prop('checked', true); i am getting all checkboxes checked — tery
– tery, Commented Sep 21, 2018 at 12:35

Ram · Accepted Answer · 2018-09-21 12:58:59Z

1

You could use the prop's callback function:

$(':checkbox').prop('checked', function(index) {
   return +yourArray[index] === 1;
});

answered Sep 21, 2018 at 12:58

Ram

145k16 gold badges174 silver badges201 bronze badges

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

2 Comments

tery Over a year ago

perfect solution, but why i do not have to convert string to integer?

Ram Over a year ago

@tery + operator in +yourArray[index] converts the string into a number.

dustytrash · Accepted Answer · 2018-09-21 12:36:47Z

1

You can iterate through the checkboxes and check/uncheck each one based on the 1/0 value.

E.G:

<input type="checkbox" class="myCheckboxes" />
<input type="checkbox" class="myCheckboxes" />
<input type="checkbox" class="myCheckboxes" />
<input type="checkbox" class="myCheckboxes" />
<input type="checkbox" class="myCheckboxes" />

<script>
    var arrayFromInput = [ 1, 0, 1, 0 ];

    var checkBoxes = document.getElementsByClassName('myCheckboxes');

    for(var i=0; i<checkBoxes.length; i++)
    {
        if(i > arrayFromInput.length)
        {
            break;
        }

        checkBoxes[i].checked = arrayFromInput[i];
    }


</script>

answered Sep 21, 2018 at 12:36

dustytrash

1,5901 gold badge11 silver badges19 bronze badges

Comments

Mark Baijens · Accepted Answer · 2018-09-21 12:54:12Z

This should do the trick. When the length of the value of the input is the same as the amount of checkboxes it enables the right ones based on the inputted number.

Because the number 0 is false in javascript and other numbers are true we can say .checked = parseInt(val[i]) inside the for loop.

It is advised to restrict the input so not more then 4 characters can be typed and only 0 and 1 are accepted.

$('.input-cb').on('input', function(){
  var val = $(this).val();
  if(val.length === $('.target-cb').length) {
    for(var i = 0; i < val.length; i++) {
      $('.target-cb').get(i).checked = parseInt(val[i]);
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" value="" class="windows input-cb">
<div id="cb-wrapper">
  <input type="checkbox" value="" class="windows target-cb">
  <input type="checkbox" value="" class="windows target-cb">
  <input type="checkbox" value="" class="windows target-cb">
  <input type="checkbox" value="" class="windows target-cb">
</div>

Collectives™ on Stack Overflow

checkboxes checked based on input value

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related