jQuery 다중 라디오 버튼

StackOverflow https://stackoverflow.com/questions/209874

  •  03-07-2019
  •  | 
  •  

문제

JavaScript/jQuery를 처음 접하고 현재 객체를 얻기 위해 "this"또는 "$ (this)를 사용하는 데 어려움을 겪고 있습니다.

각 행에 라디오 버튼 세트가있는 테이블이 있으며 각 행은 's_'라는 이름이 있습니다. 기본적으로 라디오 버튼이 확인되지 않습니다.

<tr>
   <td align="left" style="width: 300px">
      <div id="div_s_0">
         <input type="radio" name="s_0" value="1" />Public
         <input type="radio" name="s_0" value="2" />Not Public
         <input type="radio" name="s_0" value="3" />Confidential
      </div>
   </td>
</tr>
<tr>
   <td align="left" style="width: 300px">
      <div id="div_s_1">
         <input type="radio" name="s_1" value="1" />Public
         <input type="radio" name="s_1" value="2" />Not Public
         <input type="radio" name="s_1" value="3" />Confidential
      </div>
   </td>
</tr>

사용자가 라디오 버튼을 선택할 때마다 새 행을 테이블에 추가하기 위해 jQuery 함수를 작성하려고하지만 현재 테이블의 마지막 행에있는 경우에만 jQuery 기능을 테이블에 추가하려고합니다. 내가하고 싶은 것은 클릭 된 라디오 버튼의 이름 속성을 얻고, 행 색인을 얻기 위해 구문 분석하고 (예 : '_'이후의 부품) 테이블의 행 수와 비교하는 것입니다. 그들이 동일하다면, 새 행을 추가하십시오. 그렇지 않으면 아무것도하지 않습니다.

내 질문은 내가 이것을 어떻게 공격 해야하는지에 따라 두 가지입니다.

1) 라디오 버튼의 이름 속성을 반환하려면 어떻게합니까, 또는 2) 현재있는 행의 행 색상을 어떻게 반환합니까?

도움이 되었습니까?

해결책

이것은 당신이 제공 한 HTML을 사용하여 색인을 얻을 수 있습니다.

$(document).ready(function() {
    $("input:radio").click(function() {
        var index = parseInt(this.name.split('_')[1])
    });
});

도움이 될 수있는 또 다른 사항 : 테이블에서 행 수 검색 :

$($("table").children()[0]).children().length

이것이 당신의 길에 도움이되기를 바랍니다.

다른 팁

특정 질문 1 & 2의 경우, "MyTable"의 ID를 테이블에 제공 한 경우이 예제는 다음과 같은 것을 제공해야합니다.

var rowIndex = $("#mytable tr").index($(this).parents("tr"));
var inputName = $(this).attr("name");
alert("Input Name: " + inputName + "; RowIndex: " + rowIndex);

내 머리 꼭대기에서 테스트되지 않은 코드가 있습니다.

$("#div_s_0 input[type='radio']").onclick = function() {
    if ($("#div_s_0 input[type='radio']:last").attr('checked') == 'checked') {
    /* add a new element */
    }
}

그 일은 DIV의 각 라디오 버튼에 OnClick 이벤트를 첨부하는 것입니다. OnClick은 해당 그룹의 마지막 라디오 버튼이 확인되었는지 확인하고 다른 요소를 추가합니다.

내가 말했듯이 아직 테스트되지 않았다고 말했습니다. 선택기에 대해 확신이 없습니다 (#div_s_0 ... :last) 그러니 FireBug에서 먼저 달리십시오.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top