restoring the state of checkboxes from an array of 0 and 1s

Question

I want to restore the state of my checkboxes in an ORACLE APEX tabular form. The selection is made in the first column using the APEX row selector f01.

I saved the checkkboxes state in a collection and from there to an array in a region item called P250_JSON,whereby the value of P250_JSON is a character string: '[1,0,0,1,0,0,0,0,0]' for example if the 1st and 4th row are selected.

From this array [1,0,0,1,0,0,0,0,0]

I want to programatically click on the 1st and 4th row element of a tabular form and restore the original choices when required.

Beginner in Jquery but I got this far:

var x = $v("P250_JSON");
var arrBoxes = jQuery.parseJSON(x);


$.each(arrBoxes,
      function(index,val){
      $("input[name='f01']").attr("checked","checked");
                           });

Obviously this checks all the checkboxes,so there is something missing.

The HTML for row 16 is: label for="f01_0015" class="hideMeButHearMe">Select Row/label input type="checkbox" name="f01" value="15" class="row-selector" id="f01_0015"

Any help appreciated.

because `$("input[name='f01']")` selects all the checkboxes... It does not magically know the one you want, you need to tell it which one. — epascarello, Jan 23 '15 at 14:42
Exactly. This is what the question is about. One needs to loop through the array and the row together and check the row where the array has a '1'. How to do this using Jquery? — Leckraj, Jan 23 '15 at 14:56

score 1 · Answer 1 · answered Jan 23 '15 at 15:43

This assumes that all the checkboxes you want to check are named as <input name="f01" />. If they are not, than you need to show some mark-up in your question.

var arrBoxes = [1,0,0,1,0];

var checkboxes = $("input[name='f01']"); //get all the checkboxes
$.each(arrBoxes, //loop through your array
  function(index, val) {
    checkboxes.eq(index) //get the current checkbox
      .prop("checked", val === 1); //set checked state based on index value
  }
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" name="f01" />
<input type="checkbox" name="f01" />
<input type="checkbox" name="f01" />
<input type="checkbox" name="f01" />
<input type="checkbox" name="f01" />

Both answers were correct. I forgot to parse using the first answer thats why it did not work.Thanks to everyone, I am really grateful. — Leckraj, Jan 23 '15 at 16:19
I see you unselected my answer and picked the other. If you did what is in the other answer, you are looking at bad performance. — epascarello, Jan 23 '15 at 17:07

Hydrothermal · Accepted Answer · 2015-01-24T04:20:01.850

0

I can't be sure if it will work for you without also seeing the HTML, but try this:

$.each(arrBoxes,
      function(index,val){
      if(val) {
          $("input[name='f01']").get(index).attr("checked","checked");
      }
                           });

You need to only select the checkbox of the same index of the current item in arrBoxes, and only check it if the current value is not falsey.

edited Jan 24 '15 at 04:20

answered Jan 23 '15 at 14:51

Hydrothermal

4,851
7
26
45

Good catch. It's unrelated to OP's question, though, so I'm not sure if I should make that change. It would also be possible to avoid having to make two jQuery calls by using `.checked = true`. – Hydrothermal Jan 23 '15 at 14:58
Are you sure all your checkboxes are named `f01`? This seems to work fine for me ([JSFiddle here](http://jsfiddle.net/vzrnjdb5/)). – Hydrothermal Jan 23 '15 at 15:19
tr> – Leckraj Jan 23 '15 at 15:30
@Leckraj That doesn't tell me much. Assuming that's a label for one of your checkboxes, is the checkbox ID the same as the name? If so, change the jQuery selector to `$("input[name^='f01']")`; this will match all inputs whose names *begin* with `f01`. – Hydrothermal Jan 23 '15 at 15:32
tr> sorry posted too soon...f01_0000 to f01_0020 for the 20 rows so f01 is ok.. – Leckraj Jan 23 '15 at 15:33
Select Row – Leckraj Jan 23 '15 at 15:41
1

Could you edit your original question to contain the full relevant HTML? – Hydrothermal Jan 23 '15 at 15:43
This answer is BAD on many levels. Looking up things on every iteration. BAD. Wrapping it with another jQuery selector because of DOM look-up. BAD. Using attr - BAD. – epascarello Jan 23 '15 at 17:06
@epascarello This isn't codereview. The double selector is a fair cop because I admittedly forgot about `.eq`, but I'm not going to fix OP's other issues. It's also worth pointing out that `$.each` is unnecessary because a simple `for` loop would be clearer and faster. – Hydrothermal Jan 23 '15 at 17:13
Yes it is not code review, but your lack of knowledge of `eq()` just produced a bad answer. Yeah the code works, so does opening a window with a hammer. Yeah it was quick way to open a window, but it will lead to issues in the future. – epascarello Jan 23 '15 at 17:17
I can definitely accept that the lack of `.eq` makes it a bad answer, but I feel that the remainder of the code shouldn't be modified because it's irrelevant to the question. Either way, it's up to OP to choose a correct answer; if he leaves mine marked, I'll edit away the double selector for the benefit of anybody reading this in the future. – Hydrothermal Jan 23 '15 at 17:22
On the use of attr or prop, you should review this answer: http://stackoverflow.com/a/5876747/368467 – hellslam Jan 30 '15 at 15:01

restoring the state of checkboxes from an array of 0 and 1s

2 Answers2