Question

    <li class="last filter">
    <?php echo $bps_options['message']; ?>&nbsp;
        <input id="bps_Show" type="checkbox" onclick="javascript:bps_toggleForm()" />
    </li>
    <?php } ?>
</ul>

-

选中复选框后会显示一个表单。如何将其更改为普通按钮？谢谢

Answer 1

您最好的选择是在span中包含复选框input标记，获取对该范围的引用，并将innerHTML替换为复制了重要属性的新按钮元素。

Answer 2

如果你不能使用Jquery，你可以通过在父元素上交换innerHTML来做到这一点。如果没有Jquery，它会更难，但仍然可行。

如果你可以使用Jquery，你可以使用.replaceWith（）。

<强> HTML：

<div id="wrapper">
    <input id="bps_Show" type="checkbox" value="click me" onclick="toggleInput();"/>
</div>

Javascript版 JSFiddle with just javascript

var oldInput = "<input id=\"bps_Show\" type=\"checkbox\" value=\click me\" onclick=\"toggleInput();\"/>";
var newInput = "<input id=\"bps_Show\" type=\"button\" value=\click me\" onclick=\"toggleInput();\"/>";

function toggleInput() {
    var wrapper = document.getElementById('wrapper');
    var elm = document.getElementById('bps_Show');
    //bps_toggleForm();

    if(elm.getAttribute("type") == "button") {
        wrapper.innerHTML = oldInput;
    } else {
        wrapper.innerHTML = newInput;
    }
    return false;
}

JQuery： Jquery Version

$(document).ready(function() {
    var newInput = "<input id=\"bps_Show\" type=\"button\" value=\"Click Me\"/>";
    var oldInput;

    $("#bps_Show").live("click", function(e) {
        e.preventDefault();
        //bps_toggleForm();
        oldInput = $(this);
        $(this).replaceWith(newInput);
        newInput = oldInput;
    });
});

按钮的javascript复选框

2 个答案: