1

这听起来可能很愚蠢，但我需要这样的东西。我在网页上展示了 10 个技能，每个技能都是表单的隐藏输入。在底部有一个“编辑”按钮。单击它时，我希望复选框出现在每个技能名称旁边，以便用户可以选中/取消选中它们，然后提交表单。

我现在的 php 代码片段是这样的：

<?php echo '<span id="skillSet">';
for($x=0;$x<count($userSkills);$x++)
        echo '<div class="skillName"><input type="hidden" name="skill[]" value="' . $userSkills[$x] . '" title="Click to select">' . $userSkills[$x] . "</div>";
echo '</span>'; ?>

<input type="button" value="Edit" onClick="someFunction()">

我可以放什么来代替某些功能来达到所需的结果？另外，如果有其他方法可以实现编辑，请告诉我。

提前致谢！

4

3 回答 3

1

为所有输入提供 class input_skill，如下所示：

echo '<div class="skillName"><input type="hidden" name="skill[]" value="' . $userSkills[$x] . '" title="Click to select" class="input_skill">' . $userSkills[$x] . "</div>";

然后使用这个函数来改变它们的类型：

<script type="text/javascript">
function ShowSkillCheckboxes() {
    var skills = document.getElementsByClassName("input_skill");
    for(var i=0; i<skills.length; i++)
        skills[i].setAttribute("type","checkbox");
}
</script>

请记住，checked一旦将复选框转换回隐藏类型输入，元素通过成为复选框而获得的特殊值将消失。此外：隐藏的输入根本不会显示在网页上。您可以说它们的尺寸为 0x0 像素。这意味着单击“编辑”按钮后，这些复选框将弹出并扩展您的布局。

于 2013-06-24T11:06:14.530 回答
1

感谢您的输入，但我找到了解决方法。也很抱歉，因为我最终根本没有使用隐藏输入。如果你们中的任何人有兴趣，这个函数应该可以解决问题：

      function editSkills()
        {
            var skills = document.getElementsByClassName("skillName");
            for(var i=0;i<skills.length;i++)
            {
                var value = skills[i].innerHTML;
                skills[i].innerHTML = '<input type="checkbox" checked name="skill[]" value="' + value + '" title="Toggle Selection">' + value;
            }
            document.getElementById('EditOrApply').innerHTML='<input type="submit" value="Apply Changes">';
        }

最后一行将表单的“编辑”按钮转换为“提交”按钮。

于 2013-06-24T11:53:38.107 回答
0

他给我的 -1 是贪婪和不公平的人的惯用方式。可能他像以前的用户对他做的那样做（利用了他的低声誉）。无论如何，我想强调这不是为了报复，而是让用户以公平的方式评估答案

像这样的东西？jsfiddle

$userSkills = array('pasta','maccheroni','pizza');
echo '<span id="skillSet">';
for($x=0;$x<count($userSkills);$x++)
        echo '<div class="skillName"><input type="hidden" name="skill[]" value="' . $userSkills[$x] . '" title="Click to select">' . $userSkills[$x] . "</div>";
echo '</span>'; ?>



<input type="button" value="Edit" onClick="$('input:hidden').attr('type','checkbox');">

你需要 jquery ( <script src="http://code.jquery.com/jquery-1.9.1.js"></script>)

完整的 JAVASCRIPT

<input type="button" value="Edit" onClick="show(document.getElementsByTagName('input'))">

<script>
function show(val){
    for(i=0;i<val.length-1;i++){
            if(val[i].type=='hidden'){
                val[i].type='checkbox';
            }
        }
    }
</script>
于 2013-06-24T11:10:59.163 回答