Javascript флажок для кнопки

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

Если вы не можете использовать Jquery, вы можете сделать это, переключив innerHTML на родительский элемент.Немного сложнее без Jquery, но все же выполнимо.

Если вы можете использовать Jquery, вы можете использовать .replaceWith ().

HTML:

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

Версия Javascript JSFiddle с использованием только 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

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

Answer 2

Лучше всего заключить флажок input в диапазон, получить ссылку на этот диапазон и заменить innerHTML новым элементом кнопки с важными атрибутами, скопированными поверх.