0

下面我有我用 PHP 构建的特定应用程序的代码。我的工作是用户界面，我一直在寻找有关如何使其工作的代码。

使用此表单，它使用最新更新的 Jquery UI 来样式化按钮和复选框。我需要在选中复选框时显示该按钮，并在未选中时消失。

还没有找到任何适用于此的代码，这让我快疯了，落后于我。

<form name="purpose" method="post" action="" >
    <div id="radiosetPURPOSE">
        <input type="checkbox" id="radio1" name="homework" value="homework" ><label for="radio1" style="font-size: 13pt; width: 130px; height: 40px;">Homework</label>
        <input type="checkbox" id="radio2" name="computer" value="computer" ><label for="radio2" style="font-size: 13pt; width: 130px; height: 40px;">Computer</label>
    </div>
    <br />
    <div id="radiosetPURPOSE2">
        <input type="checkbox" id="radio3" name="books" value="books" ><label for="radio3" style="font-size: 13pt; width: 130px; height: 40px;">Books</label>
        <input type="checkbox" id="radio4" name="reading" value="reading" ><label for="radio4" style="font-size: 13pt; width: 130px; height: 40px;">Reading</label>                     
    </div>
    <br />
        <div id="radiosetPURPOSE3">
        <input type="checkbox" id="radio5" name="tutoring" value="tutoring" ><label for="radio5" style="font-size: 13pt; width: 130px; height: 40px;">Tutoring</label>                     
    </div>
    <br  /><br  /><br  /><br  />
        <div id="btnCheckin" style="display:none">   
        <button id="btnCheckinBtn" style="font-size: 18pt; width: 175px; height: 75px;">Check In</button>
    </div>
</form>
4

4 回答 4

0

似乎我误读了您的问题，并且您希望在选中任何复选框时启用该按钮。

这将查看是否在with name中勾选了任何复选框。formpurpose

$("input:checkbox").change(function() {    
  $("#btnCheckin").toggle(!!$('form[name="purpose"] > input:checkbox:checked').length))
});
于 2013-02-14T22:15:41.177 回答
0

如果我正确阅读了您的要求，您需要检查是否选中了任何复选框以显示按钮，如果未选中所有复选框，则隐藏它？

这可能发生在单击或键盘操作上，因此您需要检查更改事件。将其包装在一个文档就绪处理程序中，包括 jQuery 并且您已设置。

$('input:checkbox').change(function () {
    if ($('input[type=checkbox]:checked').length > 0) {
        $('#btnCheckin').show();
    } else {
        $('#btnCheckin').hide();
    }
});

这是您的标记的小提琴：http: //jsfiddle.net/GGdtw/

于 2013-02-14T22:27:17.353 回答
-1

当您单击复选框时，检查它是选中还是未选中，并基于此启用或禁用按钮。（使用 jQuery）

<script>
    $(document).ready(function() {

        $("#checkbox").click(function() {
            if (("#checkbox").is(":checked")) {
                //button show (.show())
            else {
                //disable the button (.hide())
            }
        });
    });
</script>

此外，摆脱"display: none;"按钮样式。

小提琴：http: //jsfiddle.net/mbYby/

于 2013-02-14T22:05:50.927 回答
-1

您还可以使用 jQuery '.toggle()'：

http://api.jquery.com/toggle/

于 2013-02-14T22:17:16.383 回答