在jquery中显示和隐藏
我试图在onload中的jquery中显示和隐藏，但它没有显示 有人能帮我看看并提供解决方案吗？我刚刚点击了列表框想要显示的单选按钮。有什么想法吗在jquery中显示和隐藏,jquery,Jquery,我试图在onload中的jquery中显示和隐藏，但它没有显示 有人能帮我看看并提供解决方案吗？我刚刚点击了列表框想要显示的单选按钮。有什么想法吗 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> <script> $(window).load = function () { $("#main input[name='B']")
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(window).load = function () {
$("#main input[name='B']").click(function () {
alert("hiiii");
if ($('input[name=B]:checked').val() == "country") {
alert("country");
$("#country").show();
$("#state,#city").hide();
}
if ($('input[name=B]:checked').val() == "state") {
alert("state");
$("#state").show();
$("#country,#city").hide();
}
if ($('input[name=B]:checked').val() == "city") {
alert("city");
$("#city").show();
$("#country,#state").hide();
}
});
</script>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="2">
<tr>
<td>
<input type="radio" name="B" value="country">
</td>
<td>Country</td>
<td>
<input type="radio" name="B" value="state">
</td>
<td>State</td>
<td>
<input type="radio" name="B" value="city">
</td>
<td>City</td>
</tr>
</table>
Productline:
<select id="productline">
<option value="Motorcycles">Motorcycles</option>
<option value="Planes">Planes</option>
<option value="Ships">Ships</option>
<option value="Trains">Trains</option>
</select>
<select id="country">
<option value="Australia">Australia</option>
<option value="Austria">Austria</option>
<option value="Belgium">Belgium</option>
<option value="Canada">Canada</option>
<option value="Denmark">Denmark</option>
<option value="Finland">Finland</option>
<option value="France">France</option>
<option value="Germany">Germany</option>
</select>
<select id="state">
<option value="BC">BC</option>
<option value="CA">CA</option>
<option value="CT">CT</option>
<option value="Isle of Wight">Isle of Wight</option>
<option value="MA">MA</option>
<option value="NH">NH</option>
<option value="NJ">NJ</option>
<option value="NSW">NSW</option>
<option value="NV">NV</option>
</select>
<select id="city">
<option value="Allentown">Allentown</option>
<option value="Århus">Århus</option>
<option value="Auckland  ">Auckland  </option>
<option value="Barcelona">Barcelona</option>
<option value="Bergamo">Bergamo</option>
<option value="Bergen">Bergen</option>
<option value="Boston">Boston</option>
<option value="Bräcke">Bräcke</option>
<option value="Brickhaven">Brickhaven</option>
<option value="Bridgewater">Bridgewater</option>
<option value="Brisbane">Brisbane</option>
<option value="Bruxelles">Bruxelles</option>
</select>
</body>
$（窗口）.load=函数（）{
$（“#主输入[name='B']”）。单击（函数（）{
警报（“hiiii”）；
如果（$（'input[name=B]：选中'）。val（）=“country”）{
警报（“国家”）；
$（“#country”）.show（）；
$（“#州，#市”）.hide（）；
}
if（$（'input[name=B]：选中'）.val（）=“state”）{
警报（“状态”）；
$（“#state”）.show（）；
$（“#国家，#城市”）.hide（）；
}
如果（$（'input[name=B]：选中'）。val（）=“city”）{
警报（“城市”）；
$（“#城市”）.show（）；
$（“#国家，#州”）.hide（）；
}
});
国家
陈述
城市
产品线：
摩托车
飞机
船舶
火车
澳大利亚
奥地利
比利时
加拿大
丹麦
芬兰
法国
德国
卑诗省
加利福尼亚州
计算机断层扫描
怀特岛
文科硕士
全日空航空公司
新泽西州
新南威尔士州
内华达州
阿伦顿
奥胡斯
奥克兰 ； ；
巴塞罗那
贝加莫
卑尔根
波士顿
布瑞克
布里克汉
布里奇沃特
布里斯班
布鲁塞尔
$(window).load =function()
$(window).load(function()
$（function（）{}）；所以你可以试试这个： 将id
#main<table cellpadding="0" cellspacing="0" border="2" id="main">
//-------------------------------here----------^^^^^^^^
$(function(){ // <----document ready function shorter version
$("#main :radio").on('change', function(){ // <---apply change event
$('#'+this.value).show(); //<---show the target
if($(e.target).val() == 'country'){
$('#'+this.value).siblings('select:not(#productline)').hide();
} //--^----------------------------------^hide only if country is checked
});
});
//-------------------------------这里----------^^^^^^^^
$（函数（）{/
- 您没有
#main
元素
$（窗口）.load=function（）{
应该是$（窗口）.load（function（）{
- 您缺少
}）；
更新
$（窗口）。加载到窗口。onload
并为表指定一个您指定的id属性
$(window).load(function(){
$("input[name=B]").change(function(){
if($('input[name=B]:checked').val()=="country")
{
alert("country");
$("#country").show();
$("#state,#city").hide();
}
if($('input[name=B]:checked').val()=="state")
{
alert("state");
$("#state").show();
$("#country,#city").hide();
}
if($('input[name=B]:checked').val()=="city")
{
alert("city");
$("#city").show();
$("#country,#state").hide();
}
});
});
你没有主要元素
$（window）.load=function（）{应该是$（window）.load（function（））{
使用$（document）.ready（函数（）{而不是$（窗口）.load（函数（））{
替代解决方案
尽量使你的代码简单
$(window).load(function(){
$("input[name=B]").change(function(){
var elem = "#" + $('input[name=B]:checked').val();
if($(elem).length){
$("#country,#state,#city").hide();
$(elem).show();
}
});
});
试试这个：
$( document ).ready(function(e) {
$("input[name=B]").click(function () {
if ($('input[name=B]').is(':checked')) {
var val = $('input[name=B]:checked').val();
switch(val){
case "country":
alert("country");
$("#country").show();
$("#state,#city").hide();
break;
case "state":
alert("state");
$("#state").show();
$("#country,#city").hide();
break;
case "city":
alert("city");
$("#city").show();
$("#country,#state").hide();
break;
}
}
});
});
您正在使事情复杂化，同时又失去了jQuery的强大功能
您只需将输入名称更改为location
，将data choose=“location”
属性添加到select
元素，您需要根据电台显示或隐藏这些元素，并编写更简单有效的代码，而无需硬编码任何内容，如“州”、“市”或“国家”字符串
看
这就是您需要的所有jQuery：
$(function () {
$('[data-choose="location"]').hide();
$('[name="location"]').change(function () {
$('[data-choose="location"]').hide();
$('#'+$(this).val()).show();
});
})
编辑：
更改了。请单击以。根据的建议更改。类似的内容？如果（$（'input[name=B]：checked'）。val（）=“country”）使用相同的条件
是否正确Load 3 listbox要隐藏并单击单选按钮显示此代码可能会大大减少和清理：请选择一个应答签出更新的js代码$（'#'+this.value）.show（）.sibles（'select'）.hide（）；
更新此行。LOL这是个好主意，但这也会隐藏其他选择，包括产品线选择。签出：）@kenshin.thebattosai谢谢你的建议，你是对的，更新后应该是这样。不，你没有抓住要点。如果你隐藏同级，产品选择也会被隐藏。你明白吗？选择#产品线是“选择”类型的直接同级。是的，但现在你已经去硬编码了一个值#productline
不利于开发和扩展。如果您需要添加另一个不受影响的select，您将不得不再次接触此JS代码。相反，您可以查看它没有硬编码。您在这里没有遵循“关注点分离”的概念。您还将看到您的JSFIDLE没有按预期工作。哈哈所有这些编辑，你可以让他接受我的答案。哈哈！你应该知道什么表单元素用来产生什么事件，我想你是对的。。单击
可以是。更改
，不？谢谢！）但是，我不认为选择器应该是：radio
，因为当OP尝试在页面的其他地方添加另一组单选按钮时，这会产生问题。：）