如何将隐藏类型的输入转换为复选框类型的输入
How to turn a hidden type input into a checkbox type input?
这听起来可能很愚蠢,但我需要这样的东西。我在网页上展示了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()">
为了达到要求的结果,我可以放什么来代替一些函数?此外,如果我还有其他方法可以实现编辑,请告诉我。
提前感谢!
给所有输入类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
值将消失。此外:隐藏的输入根本不会显示在网页上。你可以说它们有0x0px的尺寸。这意味着单击"编辑"按钮后,这些复选框将弹出并扩展您的布局。
感谢大家的投入,但我找到了解决问题的方法。也很抱歉,因为我最终根本没有使用隐藏的输入。如果你们中的任何人感兴趣,这个功能应该可以做到:
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">'; }
最后一行将表单的"编辑"转换为"提交"按钮。
他给我的-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>
相关文章:
- 在<输入类型=“;文件“/>
- 如何将输入类型值或id从一个jsp传递到另一个jsp页面
- 可以't将几个数字设置为<输入类型=“;数字“>
- 在输入类型日期中设置日期
- 如何将键入的文本从一个输入类型的文本复制到另一个
- 输入类型按钮返回历史记录并返回顶部
- 从HTML表单发布blob的表单输入类型是什么
- 输入类型文件的未捕获类型错误
- 如何在jQuery Mobile中设置100%宽度的输入类型日期
- 输入类型=文件验证停止其他输入类型验证
- 如何显示在输入类型文件中选择的文件
- jQuery Modal Popup-回发后输入类型设置为null
- 在控制器中将输入类型时间更改为秒
- 更改具有相同id的输入类型的所有值
- 对于每个输入类型,使用javascript获取值
- 输入类型范围在angularjs重复内不起作用
- 我如何使HTML5<输入类型=月份>以在所有浏览器上工作
- 如何调用两个函数是一种html输入类型
- 如何使按钮作为输入类型文件
- 可以设置输入类型=文件的文本框的高度