Fórum JQuery funciona uma unica vez #487713
02/08/2014
0
é normal o JQuery funcionar uma unicar vez? ele só volta a funcionar depois de uma atualização, F5.
<!doctype html>
<html itemscope="" itemtype="http://schema.org/WebPage" lang="pt">
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('body').css({
'font-family': 'Segoe UI',
'padding': '20px'
});
$('table').css({
'border': '1px solid gray',
'width': '80%'
});
$('#select').click(function() {
$(':input[name=email]').attr('checked', 'checked');
});
$('#unselect').click(function() {
$(':input[type=checkbox]').removeAttr('checked');
});
$('#todos').click(function() {
if (this.checked) {
$(':checkbox[name=email]').attr('checked', 'checked');
} else {
$(':checkbox[name=email]').removeAttr('checked');
}
});
});
</script>
</head>
<body>
<form>
<h2>Meu Email Devmedia</h2>
<input type="button" value="Selecionar Todos" id="select"/>
<input type="button" value="Desselecionar Todos" id="unselect"/><br><br>
<input type="checkbox" name="todos" id="todos"/> Todos
<table cellpadding="4">
<tr>
<td>
<input type="checkbox" name="email"/>
</td>
<td>
<span>Fatura online - Banco do Brasil</span>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="email"/>
</td>
<td>
<span>Sua senha foi resetada - Onix.com</span>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="email"/>
</td>
<td>
<span>Sua senha foi resetada - Onix.com</span>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="email"/>
</td>
<td>
<span>Sua senha foi resetada - Onix.com</span>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="email"/>
</td>
<td>
<span>Sua senha foi resetada - Onix.com</span>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="email"/>
</td>
<td>
<span>Sua senha foi resetada - Onix.com</span>
</td>
</tr>
</table>
</form>
</body>
</html>
Marcelo Pastore
Curtir tópico
+ 0
Responder
Post mais votado
04/08/2014
Marcelo Pastore
Para alterar a propriedade CHECKED de um elemento use o método ".prop", então para Checar os elementos utilize, " $('#elemento').prop('checked', true); " e para desmarcar utilize " $('#elemento').prop('checked', false); "... Conforme sugere no próprio site do jQuery: [url:descricao=.prop() | jQuery]http://api.jquery.com/prop/[/url]
Uma boa prática é deixar o código jQuery sempre no final, antes apenas do <BODY>...
Aqui fica o código funcionando:
Outra coisa... Não é necessário, porém você pode usar o método "$(document).ready" de forma abreviada conforme a documentação do jQuery.
Para alterar a propriedade CHECKED de um elemento use o método ".prop", então para Checar os elementos utilize, " $('#elemento').prop('checked', true); " e para desmarcar utilize " $('#elemento').prop('checked', false); "... Conforme sugere no próprio site do jQuery: [url:descricao=.prop() | jQuery]http://api.jquery.com/prop/[/url]
Uma boa prática é deixar o código jQuery sempre no final, antes apenas do <BODY>...
Aqui fica o código funcionando:
<!doctype html>
<html itemscope="" itemtype="http://schema.org/WebPage" lang="pt">
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
</head>
<body>
<form>
<h2>Meu Email Devmedia</h2>
<input type="button" value="Selecionar Todos" id="select"/>
<input type="button" value="Desselecionar Todos" id="unselect"/><br><br>
<input type="checkbox" name="todos" id="todos"/> Todos
<table cellpadding="4">
<tr>
<td>
<input type="checkbox" name="email"/>
</td>
<td>
<span>Fatura online - Banco do Brasil</span>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="email"/>
</td>
<td>
<span>Sua senha foi resetada - Onix.com</span>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="email"/>
</td>
<td>
<span>Sua senha foi resetada - Onix.com</span>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="email"/>
</td>
<td>
<span>Sua senha foi resetada - Onix.com</span>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="email"/>
</td>
<td>
<span>Sua senha foi resetada - Onix.com</span>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="email"/>
</td>
<td>
<span>Sua senha foi resetada - Onix.com</span>
</td>
</tr>
</table>
</form>
<script type="text/javascript">
$(document).ready(function () {
$('body').css({
'font-family': 'Segoe UI',
'padding': '20px'
});
$('table').css({
'border': '1px solid gray',
'width': '80%'
});
$('#select').click(function() {
$(':input[name=email]').prop('checked', true);
});
$('#unselect').click(function() {
$(':input[type=checkbox]').prop('checked', false);
});
$('#todos').click(function() {
if($(this).is(':checked')) {
$(':checkbox[name=email]').prop('checked', true);
} else {
$(':checkbox[name=email]').prop('checked', false);
}
});
});
</script>
</body>
</html>
Outra coisa... Não é necessário, porém você pode usar o método "$(document).ready" de forma abreviada conforme a documentação do jQuery.
$(function() {
// Handler for .ready() called.
});Diego Tavares
Responder
Gostei + 2
Mais Posts
04/08/2014
Marcelo Pastore
Diego, logo de cara funcionou belezinha!!! irei comparar os dois codigos para fixar essas propriedades. muito obrigado.
abraço.
abraço.
Responder
Gostei + 0
Clique aqui para fazer login e interagir na Comunidade :)