输入单选框底部宽度jquery和隐藏显示div



我正在尝试使用jquery遵循文档,但不工作,请帮助我当我点击一个特定的单选值时它会显示div相关的

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

恐怕你的代码中有些错误。一些不正确的jQuery选择器(特别是:checked),输入错误的值(!而不是1)和拼写错误的ID属性。

你的工作代码(带注释)是:

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

最新更新