Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá, estou tentando exibir determinado conteúdo de acordo com o checkbox selecionado, até esta etapa tudo ok, com a ajuda do Marcos, que me respondeu este tópico: clique aqui consegui fazer com que o conteúdo seja exibido.
Agora vem a segunda parte que é onde estou apanhando miseravelmente, que fazer com que o item selecionado fique com uma borda para mostrar que ele esta sendo selecionado, fiz um class, especialmente para tal chamada "borda", que deveria ser ativada de acordo com o item selecionado, porem a marcação não esta ocorrendo como deveria. A marcação não esta sendo exibida e o itens não estão ocultando. Estou criando com opção "onclick" abaixo o código:
HTML:
<form>
<label>Opção 1</label>
<input type="checkbox" name="1" id="1" value="1" onclick="return itemSelect(this)"/><br>
<label>Opção 2</label>
<input type="checkbox" name="2" id="2" value="2" onclick="return itemSelect(this)"/><br>
<label>Opção 3</label>
<input type="checkbox" name="3" id="3" value="3" onclick="return itemSelect(this)"/><br>
<label>Opção 4</label>
<input type="checkbox" name="4" id="4" value="4" onclick="return itemSelect(this)"/>
</form>
<div class="item-1" style="display:none">Item 1</div>
<div class="item-2" style="display:none">Item 2</div>
<div class="item-3" style="display:none">Item 3</div>
<div class="item-4" style="display:none">Item 4</div>
CSS:
.borda {
border: 1px solid red;
padding: 10px;
box-sizing: border-box;
}
.closed {
display: none;
}
JAVASCRIPT
function itemSelect(elem) {
$('.closed').hide();
var si = $(elem).val();
switch (si) {
case '1':
$('.item-1').fadeIn();
$('#1').addClass('borda');
break;
case '2':
$('.item-2').fadeIn();
$('#2').addClass('borda');
break;
case '3':
$('.item-3').fadeIn();
$('#3').addClass('borda');
break;
case '4':
$('.item-4').fadeIn();
$('#4').addClass('borda');
break;
}
}
Podem identificar onde estou errando é se possível me ajudar a fazer esta joça funcionar?
Obrigado!>
22 horas atrás, wanderval disse:
O input do tipo checkbox, não trabalha muito bom com "border"no caso dele a propriedade "outline" tem o mesmo efeito
eu fiz uma alteração na sua lógica ve se é isso que queria:
ex: https://jsbin.com/zefimadiyo/edit?html,js,output
Wanderval. Obrigado pela resposta, isso é mais ou menos sim o que queria, porém o item que foi selecionado deve "sumir" quando for "descelecionado" ou for selecionado outra opção, por isso usei switch.
Bom Guga fiz uma pequena alteração no código me baseando na sua descrição, lembro também que deve apertar o botão "Run with JS" para que o script seja startado.
// inserido class "item-option"
<div class="item-1 item-option" style="display:none">Item 1</div>
criado método para que as opções sejam ocultadas quando o item for descelecionado ou selecionado
// metodo que oculta os itens resultado
function hiddenResultSelected() {
$('.item-option').hide();
}
[https://jsbin.com/sufotagoza/edit?html,js,output](https://jsbin.com/sufotagoza/edit?html,js,output)>
1 hora atrás, wanderval disse:
Bom Guga fiz uma pequena alteração no código me baseando na sua descrição, lembro também que deve apertar o botão "Run with JS" para que o script seja startado.
// inserido class "item-option"
<div class="item-1 item-option" style="display:none">Item 1</div>
criado método para que as opções sejam ocultadas quando o item for descelecionado ou selecionado
// metodo que oculta os itens resultado
function hiddenResultSelected() {
$('.item-option').hide();
}
[https://jsbin.com/sufotagoza/edit?html,js,output](https://jsbin.com/sufotagoza/edit?html,js,output)
Perfeito, obrigado por garantir minha nota :D. Espero poder retribuir a ajuda qualquer hora destas :D
O input do tipo checkbox, não trabalha muito bom com "border"no caso dele a propriedade "outline" tem o mesmo efeito
eu fiz uma alteração na sua lógica ve se é isso que queria:
ex: https://jsbin.com/zefimadiyo/edit?html,js,output