jQuery：在選中的複選框旁邊顯示提交按鈕

Question

我需要關於jQuery的幫助！

這裏的標記http://jsfiddle.net/MxrqS/16/

我想要做什麼時，默認情況下按鈕「繼續執行步驟2」將不顯示。但是，當其中一個時間段被選中時，該按鈕會出現在所選時間旁邊

任何人都可以幫助我實現這個目標嗎？提前致謝！

Answer 1

使用單選按鈕是在您的情況卻較受歡迎的我F你想繼續使用複選框下面的工作：

http://jsfiddle.net/lucuma/MxrqS/29/

<ul> 
    <li id="time1">08:00am - 09:00am <input type="checkbox"> <input type="submit" value="Continue to Step 2" style="display:none" /></li> 
<li id="time2">09:00am - 10:00am <input type="checkbox" name="ch1"></li> 
<li id="time3">10:00am - 11:00am <input type="checkbox" name="ch2" ></li> 
</ul>​ 

JS：

$('input[type=checkbox]').change(function() { 
    if ($(this).is(':checked')) { 
     $('input[type=checkbox]').not(this).removeAttr('checked'); 
     $('input[type=submit]').appendTo($(this).parent()).show(); 
    } else { 
     $('input[type=submit]').hide(); 
    }   
});​ 

Answer 2

如果您需要這些元素爲單選按鈕，那麼解決方案可能如下。

HTML：

<ul> 
    <li id="time1">08:00am - 09:00am <input type="radio" name="time"></li> 
    <li id="time2">09:00am - 10:00am <input type="radio" name="time"></li> 
    <li id="time3">10:00am - 11:00am <input type="radio" name="time"></li> 
</ul> 
<input type="submit" value="Continue to Step 2" style="display: none;"> 

的JavaScript：

$(":radio").on("change", function() { 
    $(this).after($(":submit").show()); 
});​ 

DEMO：http://jsfiddle.net/MxrqS/24/