Script to select only one checkbox?

Question

Script to select only one checkbox?

Navigation

#1 by (6 votes)
#2 by (1 votes)

5

I have the following code with a menu of type Accordion menu :

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: "<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>2B";color: #444;font-weight: bold;float: left;margin-right: 5px;}
.item input:checked + label:before {content: "12";}

function marca() {}

What I would like to do is the following:

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

javascript html css

asked by anonymous 15.03.2017 / 17:27

2 answers

Is there a way to create a parallel execution using javascript? [duplicate] Capturing NullPointerException is bad practice?

score 6 · Answer 1

Just changing from checkbox to radio , is not it good for 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: "<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>2B";
  color: #444;
  font-weight: bold;
  float: left;
  margin-right: 5px;
}

.item input:checked+label:before {
  content: "12";
}

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;
    }
  };
}

EDIT: UPDATED CODE TO CLOSE

score 1 · Answer 2

I used jquery:

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

HTML 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>

Allcode:

<html><head><title>Títulodapágina</title><metacharset="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><styletype="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: "function marca(element) {
        $("nav input[type=checkbox][id!=" + $(element).attr("id") + "]")
            .attr("checked", false).toggleClass('item');
}
2B";
            color: #444;
            font-weight: bold;
            float: left;
            margin-right: 5px;
        }

        .item input:checked + label:before {
            content: "12";
        }
    </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>