Unselect radio button html

2

With this code I can select a single option. How do I deselect the one I select? or make them all white

    <div class="panel panel-default">
        <div class="panel-body">
            <label class="radio-inline">
                <input type="radio" name="Tipo" value=1>1
            </label><br />
            <label class="radio-inline">
                <input type="radio" name="Tipo" value=2>2
            </label><hr />
            <label class="radio-inline">
                <input type="radio" name="Tipo" value=3>3
            </label><br />
        </div>
    </div>

if I do it in javascript as I add to the structure:

<html>

<head>
</head>

<body>
</body>

</html
    
asked by 09.11.2017 в 16:46
source

2 answers

0
espero te ayude:

<html>
<head>
        <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
        <script type="text/javascript">

            function unselect() {
                document.querySelectorAll('[name=Tipo]').forEach((x) => x.checked = false);
            }
        </script>
    </head>
<body>
<div class="panel panel-default">
        <div class="panel-body">
            <label class="radio-inline">
                <input type="radio" name="Tipo" value=1>1
            </label><br />
            <label class="radio-inline">
                <input type="radio" name="Tipo" value=2>2
            </label><hr />
            <label class="radio-inline">
                <input type="radio" name="Tipo" value=3>3
            </label><br />
            <hr/>
            <button id="unselect" onclick="unselect()">Desseleccionar</button>
        </div>
    </div>
</body>

</html>
    
answered by 09.11.2017 / 17:13
source
0

Here is a way to deselect using javascript, without any library.

You only have to put the property checked of each radio to false :

function unselect(){
  document.querySelectorAll('[name=Tipo]').forEach((x) => x.checked=false);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel panel-default">
        <div class="panel-body">
            <label class="radio-inline">
                <input type="radio" name="Tipo" value=1>1
            </label><br />
            <label class="radio-inline">
                <input type="radio" name="Tipo" value=2>2
            </label><hr />
            <label class="radio-inline">
                <input type="radio" name="Tipo" value=3>3
            </label><br />
            <hr/>
            <button id="unselect" onclick="unselect()">Desseleccionar</button>
        </div>
    </div>
    
answered by 09.11.2017 в 16:55