Input radio bottom width jquery and hiide show div-CodePudding

I am trying to use jquery following the documentation but don't work pkease help me I would that when I click on a specific radio value it display the div relationated

<script>
    $(document).ready(function(){
 $('input:radio[name=settore]:checked').change(function() {
if($("input[name='settore']").val() == '1');
    $("div#pos-animatore").show();
if($("input[name='settore']").val() == '2');
$("div#post-risto").show();
    });
    });

</script>

<body>
<div>
    <input type="radio" name="settore" value="!"><label for"animazione"> Animazione</label>
    <input type="radio" name="settore" value="2"><label for"lavoro-an">Ristorante</label>
    <input type="radio" name="settore" value="3"><label for"lavoro-an">Hotel</label>
</div>

<p></p>

<div id="pos-animatore" style="display: none;">
contenuto
 
</div>

<div id="pos-risto" style="display: none;">
contenuto2   </div>

<div id="pos-hotel" style="display: none;">
contenuto3
    </div>
    </body>

CodePudding user response：

There are a few errors in your code, I'm afraid. Some incorrect jQuery selectors (notably :checked), a mistyped value (! instead of 1) and a misspelt ID attribute.

Your working code (with comments) is:

//When the DOM document is ready... execute the following...
$(document).ready(function(){
    // Select all INPUT elements with name="settore" and bind to the change event
     $('input[name=settore]').change(function() {
         // Hide all the divs initially, as I'm assuming you only want to display the one relevant one
         $("div#pos-animatore,div#pos-risto,div#pos-hotel").hide();
   
         // If the value of the CHANGED (this) element is 1... etc
         if($(this).val() == '1'){
             $("div#pos-animatore").show();
         } else if($(this).val() == '2'){
             $("div#pos-risto").show();
         } else if($(this).val() == '3'){
             $("div#pos-hotel").show();
         }
    });
});

<div>
    <input type="radio" name="settore" value="1" id="animazione"><label for="animazione"> Animazione</label>
    <input type="radio" name="settore" value="2" id="lavoro-an1"><label for="lavoro-an1">Ristorante</label>
    <input type="radio" name="settore" value="3" id="lavoro-an2"><label for="lavoro-an2">Hotel</label>
</div>

<p></p>

<div id="pos-animatore" style="display: none;">
contenuto
</div>

<div id="pos-risto" style="display: none;">
contenuto2
</div>

<div id="pos-hotel" style="display: none;">
contenuto3
</div>