如何根据单选按钮选择显示和隐藏div

Question

我在单选按钮上有两个单选按钮，它应该显示div和隐藏div。下面是我的脚本，我不明白为什么它不起作用。

的JavaScript

$(document).ready(function() { 
 
    $(".text").show(); 
 
    $(".text1").hide(); 
 
    $("#r1").click(function() { 
 
    $(".text").show(); 
 
    $(".text1").hide(); 
 
    }); 
 

 
    $("#r2").click(function() { 
 
    $(".text1").show(); 
 
    $(".text").hide(); 
 
    }); 
 

 
});

HTML

<p>Show textboxes 
    <input type="radio" name="radio1" id="r1" checked value="Show" onClick="getResults()">Do nothing 
    <input type="radio" name="radio1" id="r2" onClick="getResults()" value="Show"> 
</p> Wonderful textboxes: 
<div class="text"> 
    <p>Textbox #1 
    <input type="text" name="text" id="text" maxlength="30"> 
    </p> 
    <p>Textbox #2 
    <input type="text" name="text" id="text" maxlength="30"> 
    </p> 
</div> 

<div class="text1"> 
    <p>Textbox #3 
    <input type="text" name="text1" id="text1" maxlength="30"> 
    </p> 
    <p>Textbox #4 
    <input type="text" name="text2" id="text1" maxlength="30"> 
    </p> 
</div> 

here is jsfiddle link

Answer 1

使用change()事件处理程序来处理更改事件并使用带有布尔参数的toggle()方法切换元素状态。

$(document).ready(function() { 
 
    // attach change event handler 
 
    $("#r1,#r2").change(function() { 
 
    // toggle based on the id 
 
    $(".text").toggle(this.id == 'r1'); 
 
    $(".text1").toggle(this.id == 'r2'); 
 
    // trigger change event to hide initially 
 
    }).first().change(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<p>Show textboxes 
 
    <input type="radio" name="radio1" id="r1" checked value="Show">Do nothing 
 
    <input type="radio" name="radio1" id="r2" value="Show"> 
 
</p> Wonderful textboxes: 
 
<div class="text"> 
 
    <p>Textbox #1 
 
    <input type="text" name="text" maxlength="30"> 
 
    </p> 
 
    <p>Textbox #2 
 
    <input type="text" name="text" maxlength="30"> 
 
    </p> 
 
</div> 
 

 
<div class="text1"> 
 
    <p>Textbox #3 
 
    <input type="text" name="text1" maxlength="30"> 
 
    </p> 
 
    <p>Textbox #4 
 
    <input type="text" name="text2" maxlength="30"> 
 
    </p> 
 
</div>

---

FYI：属性应该是在页面上唯一的，一组元素使用类属性否则，只能使用该ID的第一个元素都被选择同时使用ID选择。

Answer 2

你的代码看起来很好。使其确保您添加JQuery的正确

像

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script> 
$(document).ready(function() { 
    $(".text").show(); 
    $(".text1").hide(); 
    $("#r1").click(function() { 
    $(".text").show(); 
    $(".text1").hide(); 
    }); 

    $("#r2").click(function() { 
    $(".text1").show(); 
    $(".text").hide(); 
    }); 

}); 
</script> 

Answer 3

你的代码工作正常后添加了jQuery参考。

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 

Answer 4

使用肘法隐藏和显示去下面的链接 https://www.w3schools.com/jquery/eff_toggle.asp