Radio button e checkbox não querem cooperar ...

crisaum · Julho 19, 2013

Galera, eu sei que é batido o assunto mas estou tentando recuperar um valor de um radio button e o maledeto não me retorna de jeito nenhum!

Estou usando o seguinte código para recuperar e condicionar o valor:

if(document.getElementById("radFinanciado").checked == true){
	var radFinanciado  = "Sim";
} else {
	var radFinanciado  = "Não";
}

O erro retornado diz que não foi possível obter a propriedade "checked" do radio button. Alguma idéia do que pode ser?

Eu to executando isso num form com ajax, esse tem sido meu problema porque não conheço muito ajax!

Zack_z001 · Julho 19, 2013

Tu só quer pegar o valor do radio tipo o "value?,

<input style="width:15px; border: 0px;" type="radio" value="Numeros" name="name1" id="id2">

tipo esse radio?

e tambem que estou vendo tu está tentando pegar pelo "checked" assim não vai dar!

caso seja isso,pegar o valor,"value" eu volto aqui e dou a resposta!

crisaum · Julho 19, 2013

Fala Zack, o campo é este sim mas se tento puxar dentro do ajax pelo value ele retorna null, ai no caso eu estava tentando identificar qual o radio marcado do grupo pelo checked, sacou?

O grupo de radio buttons é de 2 respostas - sim ou não - por isso tentei verificar qual estava marcado e de acordo com o resultado passava o texto.

Nos checkbox também tenho grupos (maiores inclusive) mas vou validar depois que resolver os radio.

Pela lógica o checked deveria retornar true ou false, certo? Se ele me retornasse isso o value eu trabalho depois.

crisaum · Julho 20, 2013

Só pra esclarecer, minha estrutura está assim hoje:

Form:

<label><input type="radio" name="radFinanciado" value="Sim" id="radFinanciado_0" /> Sim</label>

<label><input type="radio" name="radFinanciado" value="Não" id="radFinanciado_1" /> Não</label>

<label><input type="checkbox" name="chkAcessorios" value="DH" id="chkAcessorios_0" /> DH</label>

<label><input type="checkbox" name="chkAcessorios" value="ABS" id="chkAcessorios_1" /> ABS</label>

<label><input type="checkbox" name="chkAcessorios" value="AIR BAG" id="chkAcessorios_2" /> AIR BAG</label>

<label><input type="checkbox" name="chkAcessorios" value="COURO" id="chkAcessorios_3" /> COURO</label>

<label><input type="checkbox" name="chkAcessorios" value="TRAVAS E VIDROS ELÉTRICOS" id="chkAcessorios_4" /> TRAVAS E VIDROS ELÉT</label>

<label><input type="checkbox" name="chkAcessorios" value="ALARME" id="chkAcessorios_5" /> ALARME</label>

Javascript:

if(document.getElementById("radFinanciado").checked == true){

var radFinanciado = "Sim";
} else {
var radFinanciado = "Não";
}

var chkAcessorios = "";
var e = document.getElementsByName("chkAcessorios").length;
var cnt = 0;
for(cnt = 0; cnt < e; cnt++){
if(document.getElementsByName("chkAcessorios").checked == true){
chkAcessorios = document.getElementsByName("chkAcessorios").value +",";
}
}

Eu tenho outros campos com text e select mas estes funcionam certinho, só radio e checkbox que estão dando nó.

angelorubin · Julho 20, 2013

Boa tarde,

Pode ser com jQuery?

jQuery

$('#enviar').on('click',function(){
    $('input:radio[name=radFinanciado]').each(function() {                        
        if ($(this).is(':checked')){
            var valor = $(this).val();
            alert(valor);
        }
    })
})

Pensando em um HTML assim:

<form>

    <label><input type="radio" name="radFinanciado" value="Sim" id="radFinanciado_0" /> Sim</label>

    <label><input type="radio" name="radFinanciado" value="Nao" id="radFinanciado_1" /> Não</label>

    <input type="button" name="enviar" id="enviar" value="enviar"/>

</form>

Espero que ajude.

Zack_z001 · Julho 20, 2013

Boa Tarde,sim crisaum eu tendi,só ficou uma dúvida minha que tu disse,

O grupo de radio buttons é de 2 respostas - sim ou não - por isso tentei verificar qual estava marcado e de acordo com o resultado passava o texto.

tu quer passar a opção de texto escolhido para tu ou para o usuário que a selecionou?

bom eu tenho um pequeno exemplo aqui,faz de conta que o alert(valor) é o usuário ou você porque eu nao sei si o valor vai pra tu ou para o usuário,

e dai quando selecionado uma rádio, seria disparado um alert

aqui vou mostrar meu link em funcionamento e aqui o código.

meu link

http://jsfiddle.net/X28F6/

e meu código

<label><input type="radio" name="radFinanciado" value="Sim" id="radFinanciado_0" /> Sim</label>
<label><input type="radio" name="radFinanciado" value="Não" id="radFinanciado_1" /> Não</label>

jquery:

$(":radio").click(function() {
           if($(this).prop("checked")) {
               var valor = $(this).val();
               alert(valor);
         }   
        });

depois tu da a resposta si é quase assim,porque assim ele verifica as radio dando o valor!

té mais e abrçs...

crisaum · Julho 21, 2013

Então pessoal eu até poderia utilizar JQuery, mas vou precisar mudar todo um form (bem grande) só por causa de 2 tipos de campos, sacaram? Eu sei que tem como recuperar o valor do radio e checkbox marcado com javascript e é isso que preciso descobrir como fazer.

Zack, o que quero saber é qual o radio que o usuário marcou, pegando o "checked" eu entro na condição e trato o texto que vou escrever no cadastro do cara e no email enviado. Eu não queria pegar somente o value do campo, mas identificar qual do grupo foi selecionado.

O exemplo deu pau, abriu a mensagem de depuração ou procurar solução.

Zack_z001 · Julho 21, 2013

Boa noite crisaum,esse meu script que postei, eu testei no Firefox e Google Chrome e rodou certo!

a função dele é quase igual a do Angelo Rubin,ele verefica e dispara um alert, ele vai diretamente a qualquer radio,

caso 3 ou mais,o certo seria arrancar $(":radio") e usar por id! e utilizei este plugin,

https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js

eu sei usar checked em javascript tambem!

mas como vou usar 2 radio,teria que ser de uma forma diferente,vou deixar para mais tarde blz,madrugada já!

té mais e fique com Deus!

angelorubin · Julho 21, 2013

Bom dia,

Quando você se refere a qual do grupo, refere-se ao índice dele? Hierarquia na arvore? O que você precisa de retorno exatamente? Não consigo entender o que isso quer dizer .....

crisaum · Julho 22, 2013

Bom pessoal, eu acho que eu acabei complicando mais do que explicando, vamos por etapas. Quando falo grupo estou me referindo as respostas que o usuário pode escolher em cada radio, como mostro abaixo o radFinanciado (um grupo com duas respostas - sim ou não):

<label><input type="radio" name="radFinanciado" value="Sim" id="radFinanciado_0" /> Sim</label>

<label><input type="radio" name="radFinanciado" value="Não" id="radFinanciado_1" /> Não</label>

O form está ok, envio outros campos normalmente e tal mas não consigo pegar o radio selecionado pelo usuário dentro do ajax. Os campos text eu pego utilizando o seguinte código:

var txtNome = document.getElementById("txtNome").value;

No caso do radio eu não consigo saber se o usuário clicou no sim ou no não, se coloco pra pegar o value ele me retorna null, se coloco pra pegar o checked ele também retorna null. Tudo que preciso é que ele me diga qual a opção do usuário, e dai pra frente eu me viro.

Neste trecho, eu tentei forçar uma condição achando que pudesse ser o til que estivesse atrapalhando mas vi que não tem nada a ver.

if(document.getElementById("radFinanciado").checked == true){

var radFinanciado = "Sim";
} else {
var radFinanciado = "Não";
}

Eu esclareci melhor agora ou confundi mais ainda?

cristianoolv · Julho 22, 2013

.getElementById seleciona o elemento que tem aquele id, no seu caso, o argumento esta diferente do id do campo.

crisaum · Julho 22, 2013

É, pensando por este lado faz sentido ... kkkkk

Será que se eu trocar o id por name no javascript resolve? Vou tentar aqui.

angelorubin · Julho 23, 2013

Bom dia,

Veja se isso ajuda:

Js

<script type="text/javascript">	   
var radioObj = document.getElementsByName('radFinanciado');	
function getCheckedValue(radioObj) {
	if(!radioObj){
		return "";
	}
	var radioLength = radioObj.length;
	if(radioLength == undefined)
		if(radioObj.checked)
			return radioObj.value;
		else
			return "";
	for(var i = 0; i < radioLength; i++) {
		if(radioObj[i].checked) {
			console.log(radioObj[i].value);
		}
	}
	return "";
}
</script>

Html

<label><input type="radio" name="radFinanciado" value="Sim" id="radFinanciado_0" />Sim</label>
<label><input type="radio" name="radFinanciado" value="Nao" id="radFinanciado_1" />Não</label>
<label><input type="radio" name="radFinanciado" value="Talvez" id="radFinanciado_2" />Talvez</label>
<br/><!--Não faça isso, utilize o CSS-->
<input type="button" id="btn-verificar" onClick="javascript:getCheckedValue(radioObj)" value="Verificar"/>

crisaum · Julho 23, 2013

Bom dia,

Veja se isso ajuda:

Js

<script type="text/javascript">	   
var radioObj = document.getElementsByName('radFinanciado');	
function getCheckedValue(radioObj) {
	if(!radioObj){
		return "";
	}
	var radioLength = radioObj.length;
	if(radioLength == undefined)
		if(radioObj.checked)
			return radioObj.value;
		else
			return "";
	for(var i = 0; i < radioLength; i++) {
		if(radioObj[i].checked) {
			console.log(radioObj[i].value);
		}
	}
	return "";
}
</script>

Html

<label><input type="radio" name="radFinanciado" value="Sim" id="radFinanciado_0" />Sim</label>
<label><input type="radio" name="radFinanciado" value="Nao" id="radFinanciado_1" />Não</label>
<label><input type="radio" name="radFinanciado" value="Talvez" id="radFinanciado_2" />Talvez</label>
<br/><!--Não faça isso, utilize o CSS-->
<input type="button" id="btn-verificar" onClick="javascript:getCheckedValue(radioObj)" value="Verificar"/>

Maravilha Angelo, não era bem isso mas usei a idéia para adaptar ao que eu precisei.

Ficou assim:

var radioObj = document.getElementsByName('radFinanciado');

var radioLength = radioObj.length;

if(radioLength != undefined){

for(var i = 0; i < radioLength; i++) {

if(radioObj.checked) {

txtFinanciado = radioObj.value;

}

}

}else{

//alert('Selecione uma resposta para a questão de financiamento!!');

txtFinanciado = '';

}

Agora eu preciso aplicar a mesma idéia no checkbox, e ai sim finalizo essa parada! Eu fiz de um jeito que era pra funcionar, mas não passa nada! Ficou assim:

var txtAcessorios = "";

var e = document.getElementsByName("chkAcessorios").length;

var cnt = 0;

for(cnt = 0; cnt < e; cnt++){

if(document.getElementsByName("chkAcessorios").checked == true){

txtAcessorios = txtAcessorios + document.getElementsByName("chkAcessorios").value +",";

}

}

Dessa vez, não deu erro nem nada mas o checkbox não retorna nenhum valor, é como se estivesse sem nenhum campo selecionado. Alguma sugestão?

Zack_z001 · Julho 23, 2013

Boa tarde crisaum,eu não respondi tu porque eu estava fora,mas por favor passa seu script,o checkbox!

eu até tinha preparado um script para o radio,mas vejo que essa parte ja foi solucionada!

mas por favor manda o do checkbox,eu estou com tempo agora!

mas ai era só usar

document.getElementById('radFinanciado_1').value

ou

document.getElementsByName("radFinanciado").value

usando uma function,if e else,ele te retornaria o valor!

mas manda ai por favor!

crisaum · Julho 23, 2013

Boa tarde crisaum,eu não respondi tu porque eu estava fora,mas por favor passa seu script,o checkbox!

eu até tinha preparado um script para o radio,mas vejo que essa parte ja foi solucionada!

mas por favor manda o do checkbox,eu estou com tempo agora!

mas ai era só usar
document.getElementById('radFinanciado_1').value
ou
document.getElementsByName("radFinanciado").value
usando uma function,if e else,ele te retornaria o valor!

mas manda ai por favor!

Fala Zack, esquenta não que as vezes também é corrido pra mim ... O código é o seguinte:

Javascript:

var txtAcessorios = "";

var e = document.getElementsByName("chkAcessorios").length;

var cnt = 0;

for(cnt = 0; cnt < e; cnt++){

if(document.getElementsByName("chkAcessorios").checked == true){

txtAcessorios = txtAcessorios + document.getElementsByName("chkAcessorios").value +",";

}

}

HTML:

<label><input type="checkbox" name="chkAcessorios" value="DH" id="chkAcessorios_0" /> DH</label>

<label><input type="checkbox" name="chkAcessorios" value="ABS" id="chkAcessorios_1" /> ABS</label>

<label><input type="checkbox" name="chkAcessorios" value="AIR BAG" id="chkAcessorios_2" /> AIR BAG</label>

<label><input type="checkbox" name="chkAcessorios" value="COURO" id="chkAcessorios_3" /> COURO</label>

<label><input type="checkbox" name="chkAcessorios" value="TRAVAS E VIDROS ELÉTRICOS" id="chkAcessorios_4" /> TRAVAS E VIDROS ELÉT</label>

<label><input type="checkbox" name="chkAcessorios" value="ALARME" id="chkAcessorios_5" /> ALARME</label>

No Javascript em teoria os checkbox do grupo seriam percorridos e a cada checkbox identificado como "checked" a variável txtAcessorios receberia o valor + ",". Por exemplo, se selecionar DH e ABS a variável txtAcessorios deveria ter como valor "DH,ABS" mas não acontece, a variável fica nula sem nenhum erro.

Eu acredito que seja algum detalhe idiota que de tanto olhar pra esse form está me passando batido, mas o fato é que não estou conseguindo identificar o erro e isso está me enrolando a vida!! kkkkk

Espero que tenha conseguido passar bem o que acontece, se ficou dúvida diz ai. Valeu!

Zack_z001 · Julho 23, 2013

Boaa Noitee crisaum,Bom oque eu entendi,você tem 6 checkbox,dai quando alguem for usar eles vão selecionar umas opções e dai concluir,dai você está com problema de juntar todos pela variavel!

Então crisaum,eu fiz um exmplo aqui depois tu responde esse exemplo é apenas um exemplo kkkkkkkkkk zueira,

dai tu seleciona as duas opção e dai as funcionam!

depois mais tarde eu faço um mais completo,eu tava editando a tempinho aqui,é que eu faço outras coisas por isso demorei dai sem querer desliguei o pc kkkkk, mas dai fiz um exemplo curto e simples!!!

http://jsfiddle.net/4Tg8j/

está ai! eu sei que nao tem nada a ver com o seu, mas ele segue esse patamar!

crisaum · Julho 24, 2013

Boaa Noitee crisaum,Bom oque eu entendi,você tem 6 checkbox,dai quando alguem for usar eles vão selecionar umas opções e dai concluir,dai você está com problema de juntar todos pela variavel!

Então crisaum,eu fiz um exmplo aqui depois tu responde esse exemplo é apenas um exemplo kkkkkkkkkk zueira,

dai tu seleciona as duas opção e dai as funcionam!

depois mais tarde eu faço um mais completo,eu tava editando a tempinho aqui,é que eu faço outras coisas por isso demorei dai sem querer desliguei o pc kkkkk, mas dai fiz um exemplo curto e simples!!!

http://jsfiddle.net/4Tg8j/

está ai! eu sei que nao tem nada a ver com o seu, mas ele segue esse patamar!

Zack, eu descobri porque deu pau no outro exemplo ... Eu uso o IE 10 aqui e nele não abre por nada, abri pelo Chrome e funcionou. Mas eu fiquei quebrando a cabeça hoje cedo e consegui achar o erro, o código ficou assim pra quem precisar:

var txtAcessorios = "";

var checkObj = document.getElementsByName('chkAcessorios');

var checkLength = checkObj.length;

for(var i = 0; i < checkLength; i++){

if(checkObj.checked == true){

txtAcessorios = txtAcessorios + checkObj.value +",";

}

}

De qualquer forma, agradeço a todos pelo empenho e ajuda! Valeu mesmo!

Arquivado

Radio button e checkbox não querem cooperar ...

Recommended Posts

crisaum 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Zack_z001 9

Compartilhar este post

Link para o post

Compartilhar em outros sites

crisaum 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

crisaum 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

angelorubin 142

Compartilhar este post

Link para o post

Compartilhar em outros sites

Zack_z001 9

Compartilhar este post

Link para o post

Compartilhar em outros sites

crisaum 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Zack_z001 9

Compartilhar este post

Link para o post

Compartilhar em outros sites

angelorubin 142

Compartilhar este post

Link para o post

Compartilhar em outros sites

crisaum 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

cristianoolv 93

Compartilhar este post

Link para o post

Compartilhar em outros sites

crisaum 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

angelorubin 142

Compartilhar este post

Link para o post

Compartilhar em outros sites

crisaum 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Zack_z001 9

Compartilhar este post

Link para o post

Compartilhar em outros sites

crisaum 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Zack_z001 9

Compartilhar este post

Link para o post

Compartilhar em outros sites

crisaum 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real