Script to select only a checkbox?

Asked

Viewed 1,889 times

5

I have the following code with a menu like Menu Accordion:

function marca() {}
body {font-family: Trebuchet MS;margin: 0px;}
nav {width: 100%;}
p {font-size: 14px;text-align: justify;}
.item label {font-size: 14px;color: #333;height: 20px;display: block;padding: 5px;background: #b8cce4;cursor: pointer;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;}
.item ul {margin: 0px;padding: 0px;list-style: none;overflow: hidden;max-height: 0;background: #fefefe;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;}
.item ul li a {padding-left: 1rem;font-size: 14px;color: #333;background: #fff;text-decoration: none;}
.item label:hover,  .item ul li a:hover {text-decoration: underline;}
.item input {display: none;}
.item input:checked ~ ul {height: auto;max-height: 100%;}
.item label:before {content: "\002B";color: #444;font-weight: bold;float: left;margin-right: 5px;}
.item input:checked + label:before {content: "\2212";}
<nav>
   <div class="item">
      <input type="checkbox" name="nome" id="check1" onclick="marca();" />
      <label for="check1">Categoria 1</label>
      <ul>
         <li><a href="#">Tabela 1</a></li>
         <li><a href="#">Tabela 2</a></li>
      </ul>
   </div>
   <br>
   <div class="item">
      <input type="checkbox" name="nome" id="check2" onclick="marca();" />
      <label for="check2">Categoria 2</label>
      <ul>
         <li><a href="#">Tabela 3</a></li>
         <li><a href="#">Tabela 4 </a></li>
      </ul>
   </div>
   <br>
   <div class="item">
      <input type="checkbox" name="nome" id="check3" onclick="marca();" />
      <label for="check3">Categoria 3</label>
      <ul>
         <li><a href="#">Tabela 5 </a></li>
         <li><a href="#">Tabela 6 </a></li>
      </ul>
   </div>
   <br>
   <div class="item">
      <input type="checkbox" name="nome" id="check4" onclick="marca();" />
      <label for="check4">Categoria 4</label>
      <ul>
         <li><a href="#">Tabela 7</a></li>
         <li><a href="#">Tabela 8</a></li>
      </ul>
   </div>
</nav>

What I’d like to do is this:

When the user clicks on a menu he opens the menu and the others remain closed. If I open another menu he must close the others!

javascript html css
  • 1

    I liked the css, had the knack. : ) +1 good question

  • 1

    @Marconi Really, it’s interesting to solve this by changing only CSS.

  • Thank you aee =)

2 answers

6

Just changing from checkbox for radio, doesn’t suit you? It would be the most practical way.

var allRadios = document.getElementsByName('nome');
var booRadio;
var x = 0;
for (x = 0; x < allRadios.length; x++) {

  allRadios[x].onclick = function() {
    if (booRadio == this) {
      this.checked = false;
      booRadio = null;
    } else {
      booRadio = this;
    }
  };
}
body {
  font-family: Trebuchet MS;
  margin: 0px;
}

nav {
  width: 100%;
}

p {
  font-size: 14px;
  text-align: justify;
}

.item label {
  font-size: 14px;
  color: #333;
  height: 20px;
  display: block;
  padding: 5px;
  background: #b8cce4;
  cursor: pointer;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

.item ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
  overflow: hidden;
  max-height: 0;
  background: #fefefe;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

.item ul li a {
  padding-left: 1rem;
  font-size: 14px;
  color: #333;
  background: #fff;
  text-decoration: none;
}

.item label:hover,
.item ul li a:hover {
  text-decoration: underline;
}

.item input {
  display: none;
}

.item input:checked~ul {
  height: auto;
  max-height: 100%;
}

.item label:before {
  content: "\002B";
  color: #444;
  font-weight: bold;
  float: left;
  margin-right: 5px;
}

.item input:checked+label:before {
  content: "\2212";
}
<nav>
  <div class="item">
    <input type="radio" name="nome" id="check1" />
    <label for="check1">Categoria 1</label>
    <ul>
      <li><a href="#">Tabela 1</a></li>
      <li><a href="#">Tabela 2</a></li>
    </ul>
  </div>
  <br>
  <div class="item">
    <input type="radio" name="nome" id="check2" />
    <label for="check2">Categoria 2</label>
    <ul>
      <li><a href="#">Tabela 3</a></li>
      <li><a href="#">Tabela 4 </a></li>
    </ul>
  </div>
  <br>
  <div class="item">
    <input type="radio" name="nome" id="check3" />
    <label for="check3">Categoria 3</label>
    <ul>
      <li><a href="#">Tabela 5 </a></li>
      <li><a href="#">Tabela 6 </a></li>
    </ul>
  </div>
  <br>
  <div class="item">
    <input type="radio" name="nome" id="check4" />
    <label for="check4">Categoria 4</label>
    <ul>
      <li><a href="#">Tabela 7</a></li>
      <li><a href="#">Tabela 8</a></li>
    </ul>
  </div>
</nav>

EDIT: UPDATED CLOSING CODE

  • Not closing the item

  • @Arturtrapp Updated!

  • Vlw my dear =D worked here. Thank you very much!!! Stay with God

  • @Andrei Nada! Consider accepting the answer to help others in the future! :)

1

I used jquery:

function marca(element) {
        $("nav input[type=checkbox][id!=" + $(element).attr("id") + "]")
            .attr("checked", false).toggleClass('item');
}

HTML has changed to: 

<input type="checkbox" name="nome" id="check1" onclick="marca(this);" />

Add the jquery reference:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

All code:

<html>
<head>
    <title>Título da página</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <style type="text/css">
        body {
            font-family: Trebuchet MS;
            margin: 0px;
        }

        nav {
            width: 100%;
        }

        p {
            font-size: 14px;
            text-align: justify;
        }

        .item label {
            font-size: 14px;
            color: #333;
            height: 20px;
            display: block;
            padding: 5px;
            background: #b8cce4;
            cursor: pointer;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            border-radius: 5px;
        }

        .item ul {
            margin: 0px;
            padding: 0px;
            list-style: none;
            overflow: hidden;
            max-height: 0;
            background: #fefefe;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            border-radius: 5px;
        }

            .item ul li a {
                padding-left: 1rem;
                font-size: 14px;
                color: #333;
                background: #fff;
                text-decoration: none;
            }

                .item label:hover, .item ul li a:hover {
                    text-decoration: underline;
                }

        .item input {
            display: none;
        }

            .item input:checked ~ ul {
                height: auto;
                max-height: 100%;
            }

        .item label:before {
            content: "\002B";
            color: #444;
            font-weight: bold;
            float: left;
            margin-right: 5px;
        }

        .item input:checked + label:before {
            content: "\2212";
        }
    </style>
    <script type="text/javascript">
        function marca(element) {
            $("nav input[type=checkbox][id!=" + $(element).attr("id") + "]")
                .attr("checked", false).toggleClass('item');
        }
    </script>
</head>
<body>
    <nav>
        <div class="item">
            <input type="checkbox" name="nome" id="check1" onclick="marca(this);" />
            <label for="check1">Categoria 1</label>
            <ul>
                <li><a href="#">Tabela 1</a></li>
                <li><a href="#">Tabela 2</a></li>
            </ul>
        </div>
        <br>
        <div class="item">
            <input type="checkbox" name="nome" id="check2" onclick="marca(this);" />
            <label for="check2">Categoria 2</label>
            <ul>
                <li><a href="#">Tabela 3</a></li>
                <li><a href="#">Tabela 4 </a></li>
            </ul>
        </div>
        <br>
        <div class="item">
            <input type="checkbox" name="nome" id="check3" onclick="marca(this);" />
            <label for="check3">Categoria 3</label>
            <ul>
                <li><a href="#">Tabela 5 </a></li>
                <li><a href="#">Tabela 6 </a></li>
            </ul>
        </div>
        <br>
        <div class="item">
            <input type="checkbox" name="nome" id="check4" onclick="marca(this);" />
            <label for="check4">Categoria 4</label>
            <ul>
                <li><a href="#">Tabela 7</a></li>
                <li><a href="#">Tabela 8</a></li>
            </ul>
        </div>
    </nav>
</body>
</html>

  • I made a Fiddle with your code and it didn’t work.

  • I tested all the code here and it worked. Added the reference to jquery?

  • Just add the jquery reference and it will work like this the way he wants it. Only with the last category clicked open.

  • I didn’t understand. I called the *.js file and it didn’t work here. ?

  • And then, @Andrei, you did it?

  • Add the jquery reference: if it is online. OK!! But if the page has to work without internet?? Will it work??

  • Then you add your local script. Get it? Take the code there from the link, create a new js in your project, call there jquery-3.1.1.js and put the code in. And then refer to your local script.

  • I did all this and it didn’t work

  • Let’s go continue this discussion in chat.

  • If the code works with jquery online, it will work with it local too. Only you add and reference right.

  • It has already been solved!! I did like the colleague upstairs and it worked Thanks for the help tmb!!!!

Show 6 more comments

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.