选中复选框后切换到 select 框

Question

我有这组复选框。它们对应于人们可以工作的日子。该系统将用于创建'work schedule'。但是，当老板选中一个复选框（让人们在那一天工作）时，它应该变成一个 select 框，这样老板就可以知道人们将在哪里工作。

复选框以这种方式命名：{UserID}_[]。复选框的值对应于一周中的第几天（星期一 -> 0，星期二 -> 1，星期三 -> 2 等）。 select框是这样制作的：{UserID}_select_[].

我尝试使用以下类型的 jquery 脚本来实现此功能：

<script>
    var userList = <?php echo json_encode($userIdList); ?>;

    function swapInput(obj) {
        for (var i in obj) {
            $(document).ready(function() {
                $("input[name='" + obj[i] + "_[]']").change(function() {
                    if ($(this).prop('checked')) {
                        $(this).hide();
                        $('input[name="' + obj[i] + '_select_['$(this).val()']"]').show();
                    }
                }
            }
        }
    }

    swapInput(userList);

</script>

不过，我对 jquery 还很陌生，所以我可能需要一些帮助。我从数据库中检索了一个 php 数组，以获取我们有空的所有用户 ID。这个被转换成一个 jquery 变量。我尝试遍历它以获取每个 ID 并编写一行代码来隐藏复选框。虽然..它不起作用..一如既往...

当我 var_dump userIdList php 变量时，这是我的结果：

array(3) { [0]=> int(1) [1]=> int(2) [2]=> int(4) }

这意味着用户 ID 是 1、2 和 4。但是谁能帮我解决 jquery 部分？

Answer 1

在切换复选框时附加了一个超级简单的 jquery 代码来演示 show/hide select。请注意，我使用 id 而不是 name。其他一些需要考虑的事情：

将.change更改为.click。
将$(document).ready(function()移到for循环之外，它应该运行仅一次。

$("#check").click(function(e) {
  if ($(this).prop("checked")) {
    $(this).hide();
    $("#select").show();
  }
})

#select {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<input type="checkbox" id="check">
<select id="select">
  <option>Testing</option>
</select>
</body>
</html>

选中复选框后切换到 select 框

Swap to select box once checkbox is checked

php

checkbox

jquery

onchange