Question

我使用三个单选按钮显示三个不同的div。但它没有用。这是我的剧本

<script>

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

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

这是我的工作演示的js-fiddle：

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

Answer 1

.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 here demo Demo

Answer 2

试试这个 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

Answer 3

首先在你的页面上添加jquery 然后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();
        });
});

Answer 4

更新了脚本并添加了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>

我希望这对你有用！祝你好运！

Answer 5

您需要根据div更改无线电元素的值，还为所有div容器创建一个公共类，以便一次只显示一个div，

试试，

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

Answer 6

Try this Fiddle

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

在选择单选按钮显示div jquery

6 个答案: