Question

所以我想动态更改页面上的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 +'/>)';
    });

Answer 1

请尝试下面的示例。这应该工作。（你必须改变它以适合你的代码）你明白了。您需要删除插入新文本输入并删除原始

＆＃13;

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

Answer 2

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

Answer 3

首先想到的是隐藏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);
        }
    });
});

Answer 4

谢谢大家的回应，我拿了一些代码但是必须编辑它才能使用我的页面。这是代码：

$("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();


        });

动态更改单选按钮到文本框

4 个答案: