所以我想动态更改页面上的html,但我似乎陷入了困境。 我想这样做当用户点击单选按钮时,jquery保存值,然后将单选按钮更改为带有单选按钮值的文本框
这是创建单选按钮的位置
<?php
while ($row_tag = $allSkillTags->fetch()) {
$i++;
?>
<input class="sk" type="radio" name="oids[]" value="<?=$row_tag['skilltagid'];?>" /><label><?=$row_tag['skilltagname'];?></label><br />
<?php
if($i == $startSecondColumn) {
?>
我的Jquery:
$("input[type='radio']").change(function(){
var id = $(this).val();
var name = $(this).next('label').text();
$(this).html('<input type="hidden" type="text" value=' + id +' /><input class="sk" type="text" name="selectedTag" value=' + name +'/>)';
});
答案 0 :(得分:1)
请尝试下面的示例。 这应该工作。 (你必须改变它以适合你的代码) 你明白了。您需要删除插入新文本输入并删除原始
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
&#13;
$(function(){
$("input[type='radio']").change(function(){
$("<input />").attr({ name: this.name, value: this.value, type:"text" }).insertBefore(this);
alert($(this).next('label').text())
$(this).remove();
})
})
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<input type="radio" value="2" id="test" name="test" />
<label>Radio text</label>
</body>
&#13;
答案 1 :(得分:0)
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#test').change(function () {
var id = $(this).val();
var name = $('label[for="'+$(this).attr('id')+'"]').text();
$(this).attr('type', 'text');
$(this).attr('id', id);
$(this).attr('name', name);
});
});
</script>
</head>
<body>
<input type="radio" value="2" id="test" name="test" /><label for="test">My Label</label>
</body>
</html>
答案 2 :(得分:0)
首先想到的是隐藏radiobutton,使其值继续表单提交,并用输入类型文本替换该标签
所以,这个
<input class="sk" type="radio" name="oids[]" value="<?=$row_tag['skilltagid'];?>" /><label><?=$row_tag['skilltagname'];?></label><br />
成为这个:
<input class="sk" type="radio" name="oids[]" value="<?=$row_tag['skilltagid'];?>" /><input type="text" disabled value="<?=$row_tag['skilltagname'];?>" /><br />
请注意,您必须使用CSS样式输入此输入,使其看起来像标签,或者您希望它看起来像什么。
然后,javascript隐藏radiobutton并启用文本框。
$(document).ready(function(){
$('input[type="radiobutton"]').on('click', function(){
if ($(this).prop('checked')){
$(this).css('display', 'none');
$(this).next('input[type="text"]').prop('disabled', false);
}
});
});
答案 3 :(得分:0)
谢谢大家的回应,我拿了一些代码但是必须编辑它才能使用我的页面。 这是代码:
$("input[type='radio']").change(function(){
var id = $(this).val()
var name = $(this).next().text();
$("<input />").attr({ name: this.name, value: name, type:"text" }).insertBefore(this);
$("<input hidden />").attr({ value: id, type:"text" }).insertBefore(this);
$(this).next().remove();
$(this).remove();
});