Formatacao - selectOneRadio - negrito

Front-end
#1

Oi pessoal,

Estou com uma duvida na questao de radios buttons:

tenho o seguinte trecho do codigo:

<t:selectOneRadio id="opcoesPagamento"   layout="spread" value="#{formaBean.codPagamento}" >
          <t:selectItems var="oPagamento" value="#{formaBean.listaPagamentos}"
   itemLabel="#{oPagamento.desc}" itemValue="#{oPagamento.codPag}" />

Preciso que quando a pessoa selecione uma forma de pagamento, este texto fique em negrito…ja tentei usar script, usar style…mas sem sucesso

Voces tem alguma ideia disso?

grata

#2

Olá :!:

acho que no onclick/onchange dá para chamar uma função javascript que altera o ‘style’ ou ‘class’ da opção selecionada.

Com jQuery fica mais fácil, vc utiliza ou pode utilizar jQuery no projeto :?:

Como é o HTML gerado pelo trecho de código JSF que vc colou :?:

#3

posso usar jquery sim. Tentei usar javascript, mas sem sucesso…:confused:

#4

Se você postar o HTML gerado posso tentar ajudar.

Fiz em cima do HTML gerado por <h:selectOneRadio>.
Testa a página anexada e veja se é isso que vc quer :?:

Para adaptar para o seu código, creio que basta incluir as funções JavaScript e adicionar o class e evento no seu select:

<t:selectOneRadio id="opcoesPagamento" styleClass="radioOption" onclick="estiloNegrito(this)" layout="spread" value="#{formaBean.codPagamento}" > <t:selectItems var="oPagamento" value="#{formaBean.listaPagamentos}" itemLabel="#{oPagamento.desc}" itemValue="#{oPagamento.codPag}" />

#5

obrigada pela dicarock

Tentei modificar mas ele nao aceitoo(seu exemplo ta normal em html), mas qdo rodei o jsf :confused:

Aquele nome (campo) no javascript é o meu id do selectOneRadio?

#6

O parâmetro ‘campo’ na função estiloNegrito é o próprio input.
Por isso no selectOneRadio vc precisa colocar onclick=“estiloNegrito(this)”, para passar o próprio input radio.

#7

Entao, fiz desse jeito mesmo,

    <t:selectOneRadio id="opcoesPagamento" styleClass="radioOption" onclick="estiloNegrito(this)" layout="spread" value="#{formaBean.codPagamento}" >  
              <t:selectItems var="oPagamento" value="#{formaBean.listaPagamentos}"  
       itemLabel="#{oPagamento.desc}" itemValue="#{oPagamento.codPag}" />

To pensando aqui, sera que deveria colocar no <h:panelGrid>?

#8

Você importou/copiou as funções Javascript :?:
Ocorreu algum erro de Javascript :?: Qual :?:

Podes colocar um alert(“teste”) no meio da função para ver se está entrando…

Outra coisa, a função que criei é para aquele HTML. Se o próximo elemento após cada radio não for um elemento html (ex.: span, div ou label) com o texto, também não irá funcionar conforme o desejado.
Por isso comentei para postar o HTML gerado para criar uma função adequada ao seu caso.

:roll:

#9

desculpe rock,
Nao entendo quando voce diz para postar o codigo html…(voce esta dizendo para pegar o codigo fonte da pagina gerada)??? :confused:

#10

Sim :!:

#11

codigo gerado:

tbody id="formCarrinho:tableCarrinho:listaPossiveisFPagamento:tbody_element">
<tr><td class="opcaoPagamento">
<label><input type="radio" name="opcoesPagamento" checked="checked" value="002" onclick="estiloNegrito(this)" class="radioOption" />exemplo 1</label></td>
<td class="valorPagamento"><span id="formCarrinho:tableCarrinho:listaPossiveisFPagamento:0:outValorFrete">1</span></td></tr>
<tr><td class="opcaoPagamento">
<label><input type="radio" name="opcoesPagamento" value="190" onclick="estiloNegrito(this)" class="radioOption" />exemplo 2</label></td>
<td class="valorPagamento"><span id="formCarrinho:tableCarrinho:listaPossiveisFPagamento:1:outValorFrete">2</span></td></tr>
<tr><td class="opcaoPagamento">
<label><input type="radio" name="opcoesPagamento" value="236" onclick="estiloNegrito(this)" class="radioOption" />exemplo 3</label></td>
<td class="valorPagamento"><span id="formCarrinho:tableCarrinho:listaPossiveisFPagamento:2:outValorFrete">3</span></td></tr>
<tr><td class="opcaoPagamento">
<label><input type="radio" name="opcoesPagamento" value="243" onclick="estiloNegrito(this)" class="radioOption" />exemplo 4</label></td><td class="valorPagamento"><span id="formCarrinho:tableCarrinho:listaPossiveisFPagamento:3:outValorFrete">4</span></td></tr></tbody></table>
</td></tr>
#12

A estrutura HTML gerada é diferente. O campo input está dentro do label.
Por isto precisa alterar um pouco o código JavaScript.

Nas funções JavaScript, tenta alterar onde está ‘.next()’ para ‘.parent()’.

Segue a página exemplo atualizada com a estrutura e funções semelhantes ao que vc precisa.

#13

Vou fazer mais alguns testes e post aqui.

muito obrigada rock

#14

:thumbup:

Por nada :!:

#15