JQuery funciona uma unica vez

Front-end

02/08/2014

é 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

Marcelo Pastore

Curtidas 0

Melhor post

Diego Tavares

Diego Tavares

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:

<!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.
});
GOSTEI 2

Mais Respostas

Marcelo Pastore

Marcelo Pastore

02/08/2014

Diego, logo de cara funcionou belezinha!!! irei comparar os dois codigos para fixar essas propriedades. muito obrigado.

abraço.
GOSTEI 0
POSTAR