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