Member Avatar for Ana D.

Hi,

In my page I have a checkBoxList and I need to select all items that has an specific word. Let's suppose my CBL is:

VB.NET

C#.NET

Java2SE

Java2EE


And suppose that I need to select only the items about .NET (the items that cointain the string ".NET"). How can I check (in Javascript) if current Item in the CheckBoxList contains the string I'm passing as parameter?

Right now my code is like this:

function checkSpecific(cbl, text) {

    var chkBoxList = document.getElementById(cbl);

    var chkBoxCount = chkBoxList.getElementsByTagName("input");

    for (i = 0; i < chkBoxCount.length; i++) {

          var currentItem = chkBoxCount[i].innerText

          var expectedIndex = currentItem.length - text.length

          if (currentItem.lastIndexOf(text) == expectedIndex) {

              chkBoxCount[i].checked = true;

          }

    }

}

But the problem is that I'm not able to get the text of the currentItem (VB.NET, C#.NET, etc). Does anyone know how can I do it?

Thanks in advance,


Ana

  • 2 Contributors
  • 3 Replies
  • 1K Views
  • 3 Months Discussion Span
  • Latest Post Latest Post by brigzy

Dani AI

Generated

's approach is correct in principle: the visible text is on the label, not the input element. For a more robust solution, locate the label associated with each checkbox (prefer label[for="..."] when present), extract plain text via textContent (fallback to innerText), normalize case and whitespace, then test for "contains" or "ends with" depending on your needs. Also be careful what you pass into the function: pass the CheckBoxList container (or its client ID), not a ListItem or this from the wrong element, and make sure the DOM is ready before running the script.

function checkSpecific(containerOrId, searchText) {
    var container = typeof containerOrId === 'string' ? document.getElementById(containerOrId) : containerOrId;
    if (!container) return;
    var checks = container.querySelectorAll('input[type="checkbox"]');
    searchText = (searchText || '').toLowerCase();
    for (var i = 0; i < checks.length; i++) {
        var chk = checks[i];
        var label = document.querySelector('label[for="' + chk.id + '"]') || chk.nextSibling || chk.parentNode.querySelector('label');
        var labelText = label ? (label.textContent || label.innerText || '').trim().toLowerCase() : '';
        chk.checked = labelText.indexOf(searchText) !== -1;
    }
}

Troubleshooting tips: if getElementsByTagName('input') returns 0, inspect the rendered HTML (View Source or dev tools) — you may be passing the wrong element or running before render. From server markup use the control client id, for example checkSpecific('<%= chkAction.ClientID %>', '.NET'). For exact end-of-string matches use labelText.endsWith(searchText) (or compare positions); for case-insensitive contains keep indexOf after toLowerCase(). , checking the DOM structure will reveal why your options.length was zero.

Member Avatar for Ana D.

I found the solution in this forum: http://forums.asp.net/p/1439302/3361665.aspx#3361665

In my case, the solution is:

function checkSpecific(cbl, text) {
            var chkBoxList = document.getElementById(cbl);
            var chkBoxCount = chkBoxList.getElementsByTagName('input');

            for (var i = 0; i < chkBoxCount.length; i++) {
                var elementRef = chkBoxCount[i];
                var labelArray = elementRef.parentNode.getElementsByTagName('label');
                var currentItem = labelArray[0].innerHTML;
                var expectedIndex = currentItem.length - text.length;
                if ((elementRef.type == 'checkbox') && (currentItem.lastIndexOf(text) == expectedIndex)) {
                    if (labelArray.length > 0) {
                        chkBoxCount[i].checked = true;
                    }

                } else {
                chkBoxCount[i].checked = false;
                }
            }
        }

I hope this can help someone in the future =)

Member Avatar for brigzy

Please can you show the OnClick call you have used, I need to understand what parameters you have passed, is it ?
Thanks
Richard

Member Avatar for brigzy

Please can you show the OnClick call you have used, I need to understand what parameters you have passed, is it ?
Thanks
Richard

Oh I see it must be OnClick="checkSpecific(this, 'NET').

I calling from a gridView Template checkboxlist :

function readListControl(checkBoxList)
{
    var options = checkBoxList.getElementsByTagName('input');
    var arrayOfCheckBoxLabels= checkBoxList.getElementsByTagName("label");
    for(i=0;i<=options.length;i++)
    {
        var opt = options[i];
        if(opt.checked)
        {
            Alert(arrayOfCheckBoxLabels[i].innerText); 
        } 
    }
}

and control defined as

<ItemTemplate>
        <asp:CheckBoxList ID="chkAction" runat="server" BorderColor="#006600" 
            BorderWidth="2px" style="text-align: left" 
             onc >
            <asp:ListItem onclick="readListControl(this)">ID Verification Required</asp:ListItem>
            <asp:ListItem onclick="readListControl(this)" Enabled="False">Received Proof ID</asp:ListItem>
        </asp:CheckBoxList>
    
    </ItemTemplate>

For some reason the javascript:

var options = checkBoxList.getElementsByTagName('input');

allways has Count of 0, I don't understand why.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.