How to access HTML object constructed below using JavaScript

Question

I am trying to limit a selection in my list - string check boxes. However, I can't seem to select the object in HTML. I am using an application builder with my objects and trying to implement an additional JavaScript code.

I have tried using the document.getElementsByClassName(), .querySelector() and .getElementsByTag() to select my objects but no success.

I can't figure out as to why this code won't work. Could it be because I am wasn't able to construct my code correctly or use the selectors properly? I am not really familiar with JavaScript, any help or directions would be very appreciated.

var checks = document.querySelectorAll(".item");
var max = 2;
for (var i = 0; i < checks.length; i++)
  checks[i].onclick = selectiveCheck;

function selectiveCheck(event) {
  var checkedChecks = document.querySelectorAll(".item:checked");
  if (checkedChecks.length >= max + 1)
    return false;
}

<div id="MultiSelectBox" class="ListData SelectBox cbFormSelect" style="z- 
index: 1002; left: 109px; top: 43px; width: 107px; height: 151px; 
background-color: rgb(255, 255, 255);">
  <div class="Body" style="overflow-y: auto;">
    <div style="display: table; width: 100%;">

      <div style="">
        <div class="Item" style="outline: none;">
          <input type="checkbox" style="outline: none; margin-left: 0px; margin- 
right: 6px;" id="InsertRecordCheckList_3a4dfdb26cc834_checked_0"><label for="InsertRecordCheckList_3a4dfdb26cc834_checked_0">Apple</label></div>

        <div class="Item" style="outline: none;"><input type="checkbox" style="outline: none; margin-left: 0px; margin-right: 6px;" id="InsertRecordCheckList_3a4dfdb26cc834_checked_1"><label for="InsertRecordCheckList_3a4dfdb26cc834_checked_1">Banana</label></div>

        <div class="Item" style="outline: none;"><input type="checkbox" style="outline: none; margin-left: 0px; margin-right: 6px;" id="InsertRecordCheckList_3a4dfdb26cc834_checked_2"><label for="InsertRecordCheckList_3a4dfdb26cc834_checked_2">Melon</label></div>

        <div class="Item" style="outline: none;"><input type="checkbox" style="outline: none; margin-left: 0px; margin-right: 6px;" id="InsertRecordCheckList_3a4dfdb26cc834_checked_3"><label for="InsertRecordCheckList_3a4dfdb26cc834_checked_3">Mango</label></div>

        <div class="Item" style="outline: none;"><input type="checkbox" style="outline: none; margin-left: 0px; margin-right: 6px;" id="InsertRecordCheckList_3a4dfdb26cc834_checked_4"><label for="InsertRecordCheckList_3a4dfdb26cc834_checked_4">Grapes</label></div>

        <div class="Item" style="outline: none;"><input type="checkbox" style="outline: none; margin-left: 0px; margin-right: 6px;" id="InsertRecordCheckList_3a4dfdb26cc834_checked_5"><label for="InsertRecordCheckList_3a4dfdb26cc834_checked_5">Peach</label></div>
      </div>
    </div>
  </div>
</div>

The expected result is quite simple, the script shouldn't not allow all users to select more than 2 options.

The class of elements is set to "Item" at HTML though selector used at JavaScript is ".item". Selectors strings are case sensitive. There are no elements having class set to "item" at HTML. — guest271314
– guest271314, Commented Feb 2, 2019 at 9:02
Hi there, Thank you for pointing that out, I forgot to mention that I have tried both cases but didn't work too. — Kenneth_V
– Kenneth_V, Commented Feb 2, 2019 at 9:09
What do you mean by "didn't work"? The code in selectiveCheck only evaluaties the .length of checkedChecks, correct? What is the expected result? — guest271314
– guest271314, Commented Feb 2, 2019 at 9:17
As I understand, the function is limiting the user to select up to 2 options only. as I checked there is no validation still. did I get it correctly? — Kenneth_V
– Kenneth_V, Commented Feb 2, 2019 at 9:20

Hq Shiblu · Accepted Answer · 2019-02-02 09:14:30Z

1

You are doing it completely wrong. You are checking ".item:checked", so it's the checkbox who should have the class "item", not the div.

<div style="">
        <div style="outline: none;">
            <input class="item" type="checkbox" style="outline: none; margin-left: 0px; margin-right: 6px;" id="InsertRecordCheckList_3a4dfdb26cc834_checked_0">
            <label for="InsertRecordCheckList_3a4dfdb26cc834_checked_0">Apple</label>
        </div>
        <div  style="outline: none;">
        <input class="item" type="checkbox" style="outline: none; margin-left: 0px; margin-right: 6px;" id="InsertRecordCheckList_3a4dfdb26cc834_checked_1">
        <label for="InsertRecordCheckList_3a4dfdb26cc834_checked_1">Banana</label>
        </div>
        <div style="outline: none;">
        <input class="item" type="checkbox" style="outline: none; margin-left: 0px; margin-right: 6px;" id="InsertRecordCheckList_3a4dfdb26cc834_checked_2">
        <label for="InsertRecordCheckList_3a4dfdb26cc834_checked_2">Melon</label>
        </div>
        <div style="outline: none;">
        <input class="item" type="checkbox" style="outline: none; margin-left: 0px; margin-right: 6px;" id="InsertRecordCheckList_3a4dfdb26cc834_checked_3">
        <label for="InsertRecordCheckList_3a4dfdb26cc834_checked_3">Mango</label>
        </div>
        <div style="outline: none;">
        <input class="item" type="checkbox" style="outline: none; margin-left: 0px; margin-right: 6px;" id="InsertRecordCheckList_3a4dfdb26cc834_checked_4">
        <label for="InsertRecordCheckList_3a4dfdb26cc834_checked_4">Grapes</label>
        </div>
        <div style="outline: none;">
        <input class="item" type="checkbox" style="outline: none; margin-left: 0px; margin-right: 6px;" id="InsertRecordCheckList_3a4dfdb26cc834_checked_5">
        <label for="InsertRecordCheckList_3a4dfdb26cc834_checked_5">Peach</label>
        </div>
      </div>

Rest is Ok

answered Feb 2, 2019 at 9:14

Hq Shiblu

915 bronze badges

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

2 Comments

Kenneth_V Over a year ago

Hi, I suspect the same thing, however as I am using an application builder, I have no ability to assign class or modify the objects from the backend. The HTML is pre-defined. Perhaps you have an idea for a work around on this? thanks!

Hq Shiblu Over a year ago

Then access through child selector like this -

var checks = document.querySelectorAll(".item>input[type='checkbox']"); 			var max = 2; 			for (var i = 0; i < checks.length; i++) 			  checks[i].onclick = selectiveCheck;  			function selectiveCheck(event) { 			  var checkedChecks = document.querySelectorAll(".item>input[type='checkbox']:checked"); 			  if (checkedChecks.length >= max + 1) 				return false; 			}

Collectives™ on Stack Overflow

How to access HTML object constructed below using JavaScript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related