jQuery botões múltiplos de rádio
-
03-07-2019 - |
Pergunta
Novo para javascript / jquery e tendo um momento difícil com o uso de "isso" ou "$ (this)" para obter o objeto atual.
Eu tenho uma tabela com um conjunto de botões de rádio em cada linha, cada um com o nome 's_'. Nenhum dos botões de rádio são verificados por padrão:
<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>
Eu estou tentando escrever uma função jQuery para adicionar uma nova linha à tabela sempre que o usuário seleciona um botão de opção, mas somente se eles estão atualmente na última linha da tabela. O que eu gostaria de fazer é obter o atributo de nome do botão de opção clicada, analisá-lo para obter o índice de linha (ou seja, a parte após o '_') e compará-lo com o número de linhas na tabela. Se eles são iguais, adicionar uma nova linha, caso contrário, não fazer nada.
A minha pergunta é dupla, dependendo de como eu deveria atacar este:
1) Como faço para retornar o atributo nome de um botão de opção, OR 2) Como faço para retornar o índice de linha da linha Eu estou atualmente em?
Solução
Isto fará você o índice, utilizando o código HTML que você forneceu:
$(document).ready(function() {
$("input:radio").click(function() {
var index = parseInt(this.name.split('_')[1])
});
});
Outra coisa que pode ajudá-lo: recuperar o número de linhas em sua tabela:
$($("table").children()[0]).children().length
Espero que isso ajude você em seu caminho.
Outras dicas
Para as suas perguntas específicas 1 e 2, se você deu a sua mesa uma identificação de "mytable", este exemplo deve dar-lhe o que você está procurando:
var rowIndex = $("#mytable tr").index($(this).parents("tr"));
var inputName = $(this).attr("name");
alert("Input Name: " + inputName + "; RowIndex: " + rowIndex);
Aqui está algum código não testado, em cima da minha cabeça:
$("#div_s_0 input[type='radio']").onclick = function() {
if ($("#div_s_0 input[type='radio']:last").attr('checked') == 'checked') {
/* add a new element */
}
}
O que faz é anexar um evento onclick para cada um dos botões de rádio no div. O onclick irá verificar se o último botão de rádio em que grupo está marcada, e se assim for adicionar outro elemento.
Como eu disse que ainda não foi testado. Não tenho certeza sobre o seletor (#div_s_0 ... :last
) para dar-lhe uma corrida no Firebug em primeiro lugar.