jquery - jQuery：在选定复选框旁边显示提交按钮

Question

我需要关于 jQuery 的帮助！

这是标记http://jsfiddle.net/MxrqS/16/

我想要做的是，默认情况下不会显示“继续步骤 2”按钮。但是，当仅选择其中一个时间段时，按钮会出现在所选时间旁边

任何人都可以帮助我实现这一目标？提前致谢！

Answer 1

如果您需要这些元素是单选按钮，那么解决方案可能如下。

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());
});​

演示：http: //jsfiddle.net/MxrqS/24/

Answer 2

在您的情况下首选使用单选按钮，但是如果您想继续使用复选框，以下将起作用：

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();
    }        
});​