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

最好的办法是将您的复选框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; 
    }); 
});