Capture the value of the selected item in selectOneRadio with Javascript

Question

I have this Primefaces component:

<p:selectOneRadio id="mercado" styleClass="teste">
    <f:selectItem itemLabel="Interno" itemValue="I"/>
    <f:selectItem itemLabel="Externo" itemValue="E"/>
</p:selectOneRadio>

I tried to capture the selection value via Javascript as below, but it returns empty.

$('.teste').change(function () {
    alert($(this).val());
});

How do I recover the selection value via Javascript?

Complete code of the form:

<!-- Dialog com Formulario de Produtos-->
<p:dialog header="Formulário de Produtos" widgetVar="dialogProdutos" resizable="false" modal="true">
  <h:form id="formCadClientes">
    <p:panelGrid columns="2" id="painel" columnClasses="rotulo, campo" style="margin-top: 20px; margin-bottom: 20px">
      <p:outputLabel value="Código" for="codigo" />
      <p:panelGrid columns="2" styleClass="semBorda">
        <p:inputText id="codigo" size="20" />
      </p:panelGrid>
      <p:outputLabel value="Descrição" for="descricao" />
      <p:panelGrid columns="2" styleClass="semBorda">
        <p:inputText id="descricao" size="70" />
      </p:panelGrid>
      <p:outputLabel value="Categoria" for="categoria" />
      <p:panelGrid columns="2" styleClass="semBorda">
        <p:selectOneMenu id="categoria" style="width: 230px">
          <f:selectItem itemLabel="Selecione uma categoria" />
        </p:selectOneMenu>
        <p:commandButton value="+" oncomplete="PF('dialogCategorias').show();" title="Adicionar nova categoria" style="height: 30px" />
      </p:panelGrid>
      <p:outputLabel value="Mercado" for="mercado" />
      <p:panelGrid columns="2" styleClass="semBorda">
        <p:selectOneRadio id="mercado" styleClass="teste">
          <f:selectItem itemLabel="Interno" itemValue="I" />
          <f:selectItem itemLabel="Externo" itemValue="E" />
        </p:selectOneRadio>
      </p:panelGrid>
      <p:outputLabel value="Preço" for="preco" />
      <p:panelGrid columns="2" styleClass="semBorda">
        <p:inputText id="preco" size="15" />
      </p:panelGrid>
      <p:outputLabel value="Moeda" for="moeda" />
      <p:panelGrid columns="2" styleClass="semBorda">
        <p:inputText id="moeda" size="15" />
      </p:panelGrid>
      <p:outputLabel value="Imposto" for="imposto" />
      <p:panelGrid columns="2" styleClass="semBorda">
        <p:inputText id="imposto" size="15" />
      </p:panelGrid>
    </p:panelGrid>
    <p:commandButton value="Gravar" icon="ui-icon-disk" style="width: 120px; height: 40px; font-size: 16px" />
    <p:commandButton value="Cancelar" icon="ui-icon-cancel" oncomplete="PF('dialogProdutos').hide();" style="width: 120px; height: 40px; font-size: 16px" />
  </h:form>
</p:dialog>

Here is a screenshot of the rendered form:

Basically what I would like is that when selecting the Internal, in the field currency is set the value "R$" if selecting the External, set the value "US$".

Answer 1

Insert onchange="teste(this.value)" (or onclick="teste(this.value)") in <p:selectOneRadio id="mercado" styleClass="teste">, being like this:

<p:selectOneRadio id="mercado" styleClass="teste" onchange="teste(this.value)">

And the Javascript function that will receive the value:

<script>
function teste(a){
    alert('O valor do radio clicado é '+a);
}
</script>