單選按鈕和隱藏字段

-1

我試圖創建一個列表，當單擊單選按鈕時出現，我遇到了單擊按鈕後列表出現問題的問題。單選按鈕和隱藏字段

這裏是例子http://jsfiddle.net/c2webdev/4bpKE/

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title>Untitled Document</title> 
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 
<style> 
    .none { 
     display: none; 
    } 
</style> 
</head> 

<body> 
<input type="radio" name='thing' value='valuable' data-id="bank"/>Running Event 
<input type="radio" name='thing' value='valuable' data-id="school"/>Other challenges 
<input type="radio" name='thing' value='valuable' data-id="bakery"/>Baking 

<div id="school" class="none"> 
    <label for="name">What was the activity called?</label> 
    <select id="myList"> 
     <option value="1">List item 1</option> 
     <option value="2">List item 2</option> 
     <option value="3">List item 3</option> 
     <option value="4">List item 4</option> 
    </select> 
</div> 
<div id="bank" class="none"> 
    <label for="name">What was the activity called?</label> 
    <select id="myList"> 
     <option value="1">Pancake Making</option> 
     <option value="2">Egg and spoon race</option> 
     <option value="3">Sack race</option> 
     <option value="4">Three leg race</option> 
    </select></div> 
<div id="bakery" class="none"> 
    <label for="name">What was the activity called?</label> 
    <select id="myList"> 
     <option value="1">Pancake Making</option> 
     <option value="2">Egg and spoon race</option> 
     <option value="3">Sack race</option> 
     <option value="4">Three leg race</option> 
    </select></div> 
<script> 
    $(':radio').change(function (event) { 
     var id = $(this).data('id'); 
     $('#' + id).addClass('none').siblings().removeClass('none'); 
    }); 
</script> 
</body> 
</html>

請幫

來源

2013-08-24 Chris Christou

你需要錢嗎？ – Shomz

看起來對我很好http://jsfiddle.net/arunpjohny/rYjqY/1/ –

問題是什麼？ –

我在您選擇的容器中添加了類名.select。如果您將來添加了另一臺收音機，則以此方式填充它。所以：

CSS：

.select { 
    display: none; 
}

JS：

$('input[type="radio"]').click(function (event) { 
    $(".select").hide(); 
    var id = $(this).data('id'); 
    $('#' + id).show(); 
});

HTML：

<input type="radio" name='thing' value='valuable' data-id="bank" />Running Event 
<input type="radio" name='thing' value='valuable' data-id="school" />Other challenges 
<div id="school" class="select"> 
    <label for="myList1">What was the activity called?</label> 
    <select id="myList1"> 
     <option value="1">Virgin London Marathon</option> 
     <option value="2">Round the Island cycle challenge</option> 
     <option value="3">Kilimanjaro trek</option> 
     <option value="4">Thames Path Challenge</option> 
    </select> 
</div> 
<div id="bank" class="select"> 
    <label for="myList2">What was the activity called?</label> 
    <select id="myList2"> 
     <option value="1">Pancake Making</option> 
     <option value="2">Egg and spoon race</option> 
     <option value="3">Sack race </option> 
     <option value="4">Three leg race</option> 
    </select> 
</div>

See Demo by jquery enabled

來源

2013-08-24 14:14:08 hallaji

爲什麼我的問題被拒絕？ –

我沒有。請問我不知道爲什麼。 – hallaji

您沒有設置出庫，例如jQuery在左側窗格中

來源

2013-08-24 14:06:42

單選按鈕和隱藏字段

回答

相關問題