这可能听起来很愚蠢,但我需要这样的东西。我在网页上显示了10种技能,每种技能都是表单的隐藏输入。 在底部有一个“编辑”按钮。 点击它,我希望每个skillName旁边都有复选框,以便用户可以选中/取消选中它们,然后提交表单。
我现在的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()">
我能用什么来代替某些功能来达到要求的效果? 另外,如果还有其他方法可以实现编辑,请告诉我们。
提前致谢!
答案 0 :(得分:1)
为所有输入提供类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像素。这意味着在单击“编辑”按钮后,这些复选框将弹出并扩展您的布局。
答案 1 :(得分: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">'; }
最后一行将“编辑”转换为表单的“提交”按钮。
答案 2 :(得分:0)
这样的东西? 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>
)
<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>