Question

我有这些复选框。它们对应于人们可以工作的日子。该系统将用于创建“工作时间表”。但是，当老板检查一个复选框（让人们在某一天工作）时，它应该更改为一个选择框，以便老板可以告诉人们将在哪里工作。

复选框以这种方式获取其名称：tmp = img。复选框的值对应于一周中的一天（星期一 - > 0，星期二 - > 1，星期三 - > 2等）。选择框以这种方式生成：{UserID}_[]。

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

{UserID}_select_[]

但是，我对jquery很新，所以我可能需要一些帮助。我从数据库中检索一个php数组，以获取我们有可用性的所有用户ID。这个转换为jquery变量。我尝试循环遍历它以获取每个ID并创建一行代码来隐藏复选框。虽然..它不起作用......一如既往......

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

<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>

这意味着用户ID分别为1,2和4.但谁可以帮助我使用jquery部分？

Answer 1

在切换复选框时附加一个超级简单的jquery代码到demo show / hide select。请注意，我使用id代替name。很少有其他事情需要考虑：

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

＆＃13;

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

＆＃13;

#select {
  display: none;
}

＆＃13;

<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>

＆＃13;

选中复选框后，选中复选框

1 个答案: