How can I select an element by name with jQuery?
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>
dom
html
Javascript
jQuery
jquery-selector
- asked 9 years ago
- B Butts
2Answer
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 9 years ago
- B Butts
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 9 years ago
- B Butts
Best Rated Questions
Your Answer