JavaScript - filtrar datos a un checkbox

 
Vista:
sin imagen de perfil
Val: 27
Ha aumentado su posición en 2 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

filtrar datos a un checkbox

Publicado por gabriela paola (20 intervenciones) el 11/10/2019 17:48:18
Hola necesito ayuda con una pagina donde tengo checkboxes y es que tengo que filtrarle la informacion que tengo en un objeto, por ejemplo ,tengo senadores y al marcar el checkbox del partido de independientes me aparezcan solo los que estan en el partido de independientes y asi con todos los partidos. Todo eso desde Javascript Muchas gracias estoy comenzando y no entiendo mucho
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de joel
Val: 3.506
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

filtrar datos a un checkbox

Publicado por joel (895 intervenciones) el 11/10/2019 20:05:52
Hola Gabriela, nos puedes mostrar tu código html para intentar ayudarte?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 27
Ha aumentado su posición en 2 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

filtrar datos a un checkbox

Publicado por gabriela paola (20 intervenciones) el 15/10/2019 14:33:24
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Senate</title>
  <link rel="stylesheet" href="../bootstrap4/bootstrap-4.3.1-dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="../css/main.css">
</head>
 
<body>
  <div class="container">
    <header class="row">
      <div class="col-12 col-lg-9">
        <img src="LOGOTGIF.jpg" alt="logo del congreso" height="150" width="500" class="img-responsive">
      </div>
      <div class="col-12 col-lg-3 align-self-end">
        <div class="icono-email"></div>
        <a href="mailto:info@tfig.net"> info@tfig.net</a>
      </div>
    </header>
    <div class="row">
      <nav class=" col-12 navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">TGIF</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavDropdown">
          <ul class="navbar-nav">
            <li class="nav-item active"><a class="nav-link" href="home-page.html">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Congress 113
              </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                <a class="dropdown-item" href="house-data.html">House</a>
                <a class="dropdown-item" href="senate-data.html">Senate</a>
              </div>
            </li>
          </ul>
        </div>
      </nav>
 
      <!--Table container-->
      <div class="row">
        <div class="col-12">
          <h2>Senators</h2>
        </div>
      </div>
      <div class="row">
        <div class="col-12 col-lg-8">
          <p>First convened in 1789, the composition and powers of the Senate are established in Article One of the U.S. Constitution. Each state is represented by two senators, regardless of population, who serve staggered six-year terms. The Senate has several exclusive powers not granted to the House, including consenting to treaties as a precondition to their ratification and consenting to or confirming appointments of Cabinet secretaries, federal judges, other federal executive officials, military officers, regulatory officials, ambassadors, and other federal uniformed officers, as well as trial of federal officials impeached by the House.</p>
        </div>
        <div class="col-12 col-lg-4">
          <img src="congress.jpg" alt="congress" height="175" width="325" class="img-responsive">
        </div>
      </div>
    </div>
    <div id="checkbox">
 
      <label> <input type="checkbox" name="partido" value="Republican" id="republic" >Republican</label>
      <label> <input type="checkbox" name="partido" value="Democrat" id="democrata" >Democrat</label>
      <label> <input type="checkbox" name="partido" value="Independent" id="independent" >Indepedent</label>
 
    </div>
    <div class="row table-responsive">
      <table class=" tablaFiltros col-12 table">
        <thead>
          <tr>
            <th>Members</th>
            <th> Name and Last Name</th>
            <th>Party</th>
            <th>State</th>
            <th>Seniority</th>
            <th>%Votes</th>
          </tr>
        </thead>
        <tbody id="senate-data">
 
        </tbody>
      </table>
    </div>
    <div class="row ">
      <footer class="col">
        <p class="footer"> 2016 TGIF | ALL RIGHTS RESERVED</p>
      </footer>
    </div>
 
  </div>
  <script src="../js/pro-congress-113-senate.js"></script>
  <script src="../js/senate.js"></script>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
 
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de ScriptShow
Val: 2.019
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

filtrar datos a un checkbox

Publicado por ScriptShow (692 intervenciones) el 12/10/2019 17:35:30
Saludos,

un ejemplo sencillo, ampliable, adaptable, compatible 100%, etc...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script>
function test(o) {
var g = document.getElementById(o.value);
if (o.checked) {g.style.display = 'block'}
else {g.style.display = 'none'}
}
</script>
 
<input type="checkbox" value="g-01" onclick="test(this)">Grupo 1
<input type="checkbox" value="g-02" onclick="test(this)">Grupo 2
<input type="checkbox" value="g-03" onclick="test(this)">Grupo 3
<input type="checkbox" value="g-04" onclick="test(this)">Grupo 4
<br>
<p id="g-01" style="display:none">
Contenidos del Grupo 1 ...
</p>
<p id="g-02" style="display:none">
Contenidos del Grupo 2 ...
</p>
<p id="g-03" style="display:none">
Contenidos del Grupo 3 ...
</p>
<p id="g-04" style="display:none">
Contenidos del Grupo 4 ...
</p>

Espero sea útil.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar