在選擇單選按鈕顯示div jquery

我使用三個單選按鈕來顯示三個不同的div。但它不起作用。這裏是我的腳本在選擇單選按鈕顯示div jquery

<script> 

$(document).ready(function() { 
$("input[name$='Want_To']").click(function() { 
    var test = $(this).val(); 

    $("div.desc").hide(); 
    $("#Cars" + test).show(); 
}); 
}); 
</script>

這裏是我的工作演示我的JS-小提琴：

http://jsfiddle.net/sam050/PHu99/

來源

2014-04-30 ritika

有你添加的jQuery –

任何錯誤在你的瀏覽器控制檯 –

請檢查我的js小提琴 – ritika

你需要改變你的放射性元素的值根據您的DIV，也使通用類所有的div容器，所以，只有一個DIV將在同一時間顯示，

嘗試t等，

$(document).ready(function() { 
    $(".item-div").hide(); 
    // show checked radio div 
    $('#'+$('[name="Want_To"]:checked').val()).show(); 
    $("input[name='Want_To']").click(function() { 
     var test = $(this).val(); 
     $(".item-div").hide(); 
     $("div.desc").hide(); 
     $("#" + test).show(); 
    }); 
});

Live Demo

來源

2014-04-30 05:10:10

.usertype{ border-bottom: 1px solid #E3E3E3; padding: 15px 12px;} 
.usertype ul{margin-top:0px;} 
.usertype ul li{margin-bottom:15px;} 
.usertype ul li label{margin: 0px 15px 0px; width:160px;display:inline-block;vertical-align: top;background: none; 
border: none; color: #666;} 
.usertype input[type="radio"]:checked + .new-label{ color:#2C96D0 !important; border-color:#2c97d3; background:#2C96D0; } 
.usertype ul li label.new-label { 
    width: auto; 
    margin-left: 15px; 
    color: #9E9E9E; 
    display: inline-block; 
    font: 700 13px/31px Open Sans Bold,Arial,Helvetica,sans-serif; 
    padding: 0px 10px; 
    background: linear-gradient(to bottom, #E8E8E8 0%, #FFF 100%) repeat scroll 0% 0% transparent; 
    border: 1px solid #D6D6D6; 
    border-radius: 5px;} 
.usertype input { 
    margin-right: -30px; 
} 
#sell,#rent,#PG 
{ 
    display:none; 

}

和你的JS

$(document).ready(function() { 
    $("input[name$='Want_To']").click(function() { 
     $('#sell,#rent,#PG').hide(); 
     var test = $(this).val(); 

     $("div.desc").hide(); 
     $("#" + test).show(); 
    }); 
});

我用小這裏有點不同的方法

CHEC這裏演示Demo

來源

2014-04-30 04:59:25

工作需要一些變化..但似乎你忘了隱藏其他選擇當選擇更改... –

雅我知道@GujjuDeveloper但要求履行;） –

對不起，它不是.. –

第一個附加的jQuery yopur頁面上

那麼HTML將

<div class="usertype"> 
    <ul> 
     <li id="userpr"><label>I want to:</label> 
     <input type="radio" name="Want_To" value="sell" checked /><label class="new-label selected" for="Sell">Sell</label>  
       <input type="radio" name="Want_To" value="rent" /><label class="new-label" for="Rent/Lease">Rent/Lease</label> 
       <input type="radio" name="Want_To" value="PG" /><label class="new-label" for="Want-To-PG">PG</label> </li> 
     <div id="sell" class="desc"> 
      Show sell div 
     </div> 
     <div id="rent" class="desc"> 
      Show rent div 
     </div> 
     <div id="PG" class="desc"> 
      Show PG div 
     </div> 
    </ul> 
</div>

和JavaScript代碼將

$(document).ready(function(){ 
     $("input[type='radio']").change(function() { 
      var test = $(this).val(); 
      $("div.desc").hide(); 
      $("#" + test).show(); 
     }); 
});

來源

2014-04-30 04:59:45

試試這個 HTML

<div class="usertype"> 
    <ul> 
     <li id="userpr"> 
      <label>I want to:</label> 
      <input type="radio" name="Want_To" value="sell" id="Sell" checked /> 
      <label class="new-label selected" for="Sell">Sell</label> 
      <input type="radio" name="Want_To" value="rent" id="Rent/Lease" /> 
      <label class="new-label" for="Rent/Lease">Rent/Lease</label> 
      <input type="radio" name="Want_To" value="PG" id="Want-To-PG" /> 
      <label class="new-label" for="Want-To-PG">PG</label> 
     </li> 
    </ul> 
    <div id="sell">Show sell div</div> 
    <div id="rent">Show rent div</div> 
    <div id="PG">Show PG div</div> 
</div>

腳本

$(document).ready(function() { 
    $("#sell,#rent,#PG").hide(); 
    $("input[name$='Want_To']").click(function() { 
     var test = $(this).attr('value'); console.log(test) 
     $("#"+test).show().siblings('div').hide(); 
    }); 
});

DEMO

來源

2014-04-30 04:59:51

好使用兄弟姐妹....... –

更新腳本，並添加jQuery的

$(document).ready(function() { 
    $("input[name$='Want_To']").click(function() { 
     var test = $(this).val(); 

     $("div.desc").hide(); 
     $("#" + test).show(); 
    }); 
});

和更新HTML

<div class="usertype"> 
    <ul> 
     <li id="userpr"><label>I want to:</label> 
     <input type="radio" name="Want_To" value="sell" id="Sell" checked /><label class="new-label selected" for="Sell">Sell</label> 
       <input type="radio" name="Want_To" value="rent" id="Rent/Lease" /><label class="new-label" for="Rent/Lease">Rent/Lease</label> 
       <input type="radio" name="Want_To" value="PG" id="Want-To-PG" /><label class="new-label" for="Want-To-PG">PG</label> </li> 
     <div id="sell" class="desc" style="display:none"> 
      Show sell div 
     </div> 
     <div id="rent" class="desc" style="display:none"> 
      Show rent div 
     </div> 
     <div id="PG" class="desc" style="display:none"> 
      Show PG div 
     </div> 
    </ul> 
</div>

我希望這會對你有用祝你好運！

來源

2014-04-30 05:08:38 Sid

Try this Fiddle。

$(document).ready(function() { 
    $("input[name$='Want_To']").click(function() { 
     var test = $(this).val(); 
     console.log("#"+test); 
     $(".a").hide(); 
     $("#"+test).show(); 
    }); 
});

來源

2014-04-30 05:14:24

在選擇單選按鈕顯示div jquery

回答

相關問題