• support@answerspoint.com

How can I select an element by name with jQuery?

812

Have a table column I'm trying to expand and hide:

jQuery seems to hide the td elements when I select it by class but not by element name.

For example, why does:

$(".bold").hide();  // selecting by class works
$("tcol1").hide();  // select by element name does not work

Note the HTML below, the second column has the same name for all rows. How could I create this collection using the name attribute?

<tr>    
    <td>data1</td>
    <td name="tcol1" class="bold"> data2</td>
</tr>
<tr>    
    <td>data1</td>
    <td name="tcol1" class="bold"> data2</td>
</tr>  
<tr>    
    <td>data1</td>
    <td name="tcol1" class="bold"> data2</td>
</tr>

2Answer


0

You could get the array of elements by name the old fashioned way and pass that array to jQuery.


 

sandBox

note: the only time you would have a reason to use the "name" attribute should be for checkbox or radio inputs.

Or you could just add another class to the elements for selection.(This is what I would do)


 

sandBox

data1 data2
data1 data2
data1 data2
  • answered 2 years ago
  • B Butts

0

You could get the array of elements by name the old fashioned way and pass that array to jQuery.

<html>
<head>
    <title>sandBox</title>
</head>
<body>
    <input type="radio" name="chName"/><br />
    <input type="radio" name="chName"/><br />
    <input type="radio" name="chName"/><br />
    <input type="radio" name="chName"/><br />
    <input type="button" onclick="toggleByName();" value="toggle"/>
</body>
</html>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
    function toggleByName() {
        var arrChkBox = document.getElementsByName("chName");
        $(arrChkBox).toggle();
    }
</script>

note: the only time you would have a reason to use the "name" attribute should be for checkbox or radio inputs.

Or you could just add another class to the elements for selection.(This is what I would do)

<html>
<head>
    <title>sandBox</title>
</head>
<body>
    <table>
        <tr>
            <td>data1</td>
            <td class="bold rowToToggle">data2</td>
        </tr>
        <tr>
            <td>data1</td>
            <td class="bold rowToToggle">data2</td>
        </tr>
        <tr>
            <td>data1</td>
            <td class="bold rowToToggle">data2</td>
        </tr>
    </table>
<input type="button" onclick="toggleByClass(true);" value="show"/>
<input type="button" onclick="toggleByClass(false);" value="hide"/>
</body>
</html>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
    function toggleByClass(bolShow) {
        if (bolShow) {
            $(".rowToToggle").show();
        } else {
            $(".rowToToggle").hide();
        }
    }
</script>
  • answered 2 years ago
  • B Butts

Your Answer

    Facebook Share