Question

 <script type="text/javascript">

       $(document).ready(function () {
        $('#change').click(function () {
            if ($('#change:checked').length > 0) {
                var myType = "checkbox";
            } else {
                var myType = "radio";
            }
           var checkbox = $("#Radio1");
            checkbox.replaceWith('<input type="' + myType + '" name="option1"/>');

    });
 </script>

HTML

  <input type="checkbox" name="change" id="change"/>
  <label for="changem">Change Buttons</label>
     <br/>
     <br/>
 <input id="Radio1" type="radio" name="option1" value="answer1"/>

当我点击复选框时，单选按钮正在转换为复选框，但未点击则不会将其转换为收音机。

Answer 1

您将当前输入标记替换为新标记。但是不要给新输入标签一个id。

'<input type="' + myType + '" id="change" name="option1"/>'

Answer 2

您的代码存在一些问题：

当您更换其内容时忘记为按钮指定ID，以便下次$('#Radio1')选择器不返回任何内容时
您在myType内声明了此范围内的if变量。
您没有正确关闭})处理程序和document.ready处理程序之间的click。

以下是我建议您的建议：

$(function() {
    $('#change').change(function () {
        var myType = 'radio';
        if ($(this).is(':checked')) {
            myType = 'checkbox';
        }

        $('#Radio1').replaceWith(
            $('<input/>', {
                id: 'Radio1',
                name: 'option1',
                type: myType
            })
        );
    });
});

这里是live demo。

Unblr将复选框转换为单选按钮

2 个答案: