jQuery를 사용하여 이름으로 요소를 선택하려면 어떻게 해야 합니까?

테이블 컬럼을 확장해서 숨기려고 합니다.jQuery는 이 명령어를<td>요소를 선택할 때class하지만 자연의 힘으로는 안 된다.name.

예를 들어 다음과 같습니다.

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

다음의 HTML 에 주의해 주세요.두 번째 열은 동일한 값을 가집니다.name모든 행에 적용됩니다.이 컬렉션을 작성하려면name속성?

<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>

질문에 대한 답변

jQuery 속성 셀렉터를 사용할 수 있습니다.

$('td[name="tcol1"]')
// Matches exactly 'tcol1' $('td[name^="tcol"]' )
// Matches those that begin with 'tcol' $('td[name$="tcol"]' )
// Matches those that end with 'tcol' $('td[name*="tcol"]' )
// Matches those that contain 'tcol'

임의의 Atribute는 다음 방법으로 선택할 수 있습니다.[attribute_name=value]샘플은 이쪽에서 참조해 주세요.

var value = $("[name='nameofobject']");

다음과 같은 것이 있는 경우:

<input type="checkbox" name="mycheckbox" value="11" checked=""> <input type="checkbox" name="mycheckbox" value="12">

다음과 같이 읽을 수 있습니다.

jQuery("input[name='mycheckbox']").each(function() {
console.log( this.value + ":" + this.checked ); });

개요:

jQuery("input[name='mycheckbox']").each(function() {
console.log( this.value + ":" + this.checked ); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" name="mycheckbox" value="11" checked=""> <input type="checkbox" name="mycheckbox" value="12">

요소 배열을 구식 방식으로 가져와 jQuery에 전달할 수 있습니다.

function toggleByName() {
var arrChkBox = document.getElementsByName("chName");
$(arrChkBox).toggle(); }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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>

주의: “name” 속성을 사용해야 하는 이유는 체크박스 또는 무선 입력뿐입니다.

또는 선택할 요소에 다른 클래스를 추가할 수도 있습니다.(나는 이렇게 할 거야)

function toggleByClass(bolShow) {
if (bolShow) {
$(".rowToToggle").show();
} else {
$(".rowToToggle").hide();
} }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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>

jQuery의 이름 요소를 사용하여 입력 필드에서 이름 값을 얻을 수 있습니다.

var firstname = jQuery("#form1 input[name=firstname]").val(); //Returns ABCD var lastname = jQuery("#form1 input[name=lastname]").val(); //Returns XYZ
console.log(firstname); console.log(lastname);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form name="form1" id="form1">
<input type="text" name="firstname" value="ABCD"/>
<input type="text" name="lastname" value="XYZ"/> </form>