How to reference the paragraph element when displayed in listview control using javascript

Question

Using the below code i want to access the paragraph element when displayed inside ListView.
It will work as is but inside listview it always displays the first row paragraph and not the selected checkbox row paragraph?

Checkbox: <input type="checkbox" id="myCheck" onclick="myFunction()">

<p id="text" style="display:none">Checkbox is CHECKED!</p>
Step 2) Add JavaScript:
Example
function myFunction() {
// Get the checkbox
var checkBox = document.getElementById("myCheck");
// Get the output text
var text = document.getElementById("text");

// If the checkbox is checked, display the output text
if (checkBox.checked == true){
text.style.display = "block";
} else {
text.style.display = "none";
}
}

Answer 1

It will work as is but inside listview it always displays the first row paragraph and not the selected checkbox row paragraph?

Your HTML is malformed. IDs are supposed to be unique. The script finds the first checkbox Id that equals "myCheck". Use a click event and design the HTML so it is easy to find the <p> you wish to toggle from within the event.

<div id="bubbleEventListener">  
    <div>  
        Checkbox: <input type="checkbox" data-para="p1">  
        <p id="p1" style="display:none">Checkbox is CHECKED!</p>  
    </div>  
    <div>  
        Checkbox: <input type="checkbox" data-para="p2">  
        <p  id="p2" style="display:none">Checkbox is CHECKED!</p>  
    </div>  
    <div>  
        Checkbox: <input type="checkbox"  data-para="p3">  
        <p  id="p3" style="display:none">Checkbox is CHECKED!</p>  
    </div>  
</div>  

JavaScript

        const element1 = document.querySelector('#bubbleEventListener').addEventListener('click', event => {  
            var elem = event.target  
            var id = elem.dataset.para;  
            document.getElementById(id).style.display = elem.checked ? "block" : "none";  
        });  

Answer 2

Hi @peter liles ,
You need to traverse the checkbox in the listview.
You can refer to the following example.Code:270381-2.txt

<asp:ListView ID="ListView1" runat="server" DataKeyNames="ID" >  
        <ItemTemplate>  
            <tr style="">  
                <td align="center">  
                  Checkbox: <input type="checkbox" id="myCheck" class="abc" />  
                </td>  
            </tr>  
        </ItemTemplate>  
        <LayoutTemplate>  
            <table>  
                <tr runat="server" style="">                                 
                    <th runat="server">Select</th>  
                </tr>  
                <tr id="itemPlaceholder" runat="server">  
                </tr>  
            </table>  
        </LayoutTemplate>  
    </asp:ListView>  
          <p id="text" style="display:none">Checkbox is CHECKED!</p>   

Best regards,
Lan Huang

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 3

What if i had other elements placed after the checkbox. How would i then reference them?

I think you are asking how to access the next sibling (nextElementSibling). Unfortunately, you did not provide a code example so we have to guess how your code works.

The HTML design is the same as above where the checkbox input and p element are siblings. The JavaScript takes advantage of event bubbling like the original example.

<div id="bubbleEventListener">  
    <div>  
        Checkbox: <input type="checkbox">  
        <p style="display:none">Checkbox is CHECKED!</p>  
    </div>  
    <div>  
        Checkbox: <input type="checkbox">  
        <p style="display:none">Checkbox is CHECKED!</p>  
    </div>  
    <div>  
        Checkbox: <input type="checkbox">  
        <p style="display:none">Checkbox is CHECKED!</p>  
    </div>  
</div>  

The JavaScript.

const element1 = document.querySelector('#bubbleEventListener').addEventListener('click', event => {  
    var elem = event.target;  
    elem.nextElementSibling.style.display = elem.checked ? "block" : "none";  
});  

Answer 4

This is a useful example!
I scraped the purpose behind it in favour of another simpler method. Though i want to use it for error checking. I tried using the customvalidator and that proved problematic.
I often get confused when looking at javascript the difference between event parameter and 'this' keyword and now the target method. At times they seem interchangeable?

Answer 5

should i want to select other elements instead of the adjacent element is there a way? much like in HTML using the n+1 position