Agregar evento a checkbox cuando lo deselecciono

[metacortex]

Hola pueblo, tengo este script con el que cargo una página externa:

Código Javascript:

<script type="text/javascript">
var http_request = false;
function makePOSTRequest(url, parameters) {
    http_request = false;
    if (window.XMLHttpRequest) {
        http_request = new XMLHttpRequest();
        if (http_request.overrideMimeType) {
            http_request.overrideMimeType('text/html');
        }
    } else if (window.ActiveXObject) {
        try {
            http_request = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                http_request = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
        }
    }
    if (!http_request) {
        alert('Cannot create XMLHTTP instance');
        return false;
    }
    http_request.onreadystatechange = alertContents;
    http_request.open('POST', url, true);
    http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    http_request.setRequestHeader("Content-length", parameters.length);
    http_request.setRequestHeader("Connection", "close");
    http_request.send(parameters);
}
 
function alertContents() {
    if (http_request.readyState == 4) {
        if (http_request.status == 200) {
            result = http_request.responseText;
            document.getElementById('opciones').innerHTML = result;            
        } else {
            alert('Hubo un problema con la operación.');
        }
    }
}
 
function get(obj) {
  var poststr = "port_post=" + encodeURI( document.getElementById("port24").value );
  makePOSTRequest('http://www.sitio.com/inc/metaform.php?opcion='+ encodeURI( document.getElementById("port24").value ), poststr);
}
</script>
 

En el HTML se encuentra este checkbox:

Código HTML:

<input type="checkbox" name="port_post[]" value="24" id="port24" onclick="get(this.parentNode);"  />
 

Y luego una capa donde aparece el contenido de la página externa. Esta capa tiene datos predeterminados que son reemplazados por los nuevos:

Código HTML:

<div id="opciones">Mi contenido predeterminado</div>
 

Mi duda: Cuando selecciono el checkbox se cargan los datos externos sin problemas, pero quisiera que al deseleccionarlo se vuelva a cargar el contenido predeterminado ¿cómo puedo proceder?.

[Adler]

Hola

Se me ocurre lo siguiente a ver que parece

Creas dos div

<div id="opciones1" style="display:block;">Mi contenido predeterminado</div>
<div id="opciones2" style="display:none;>Nuevo contenido</div>

Uno (contenido predeterminado) en block y el otro (contenido nuevo) none

Por otro lado en la llamada a la función get le añadimos otro argumento

<input type="checkbox" name="port_post[]" value="24" id="port24" onclick="get(this.parentNode, this.checked);" />

con lo cual sabes si el checkbox está en true o false

Ahora en la función get

Código Javascript:

function get(obj, bol) {
if(bol) { // si es true, prosigue
  var poststr = "port_post=" + encodeURI( document.getElementById("port24").value );
  makePOSTRequest('http://www.sitio.com/inc/metaform.php?opcion='+ encodeURI( document.getElementById("port24").value ), poststr);
} else { // si es false mostramos el div con el contenido predeterminado
document.getElementById('opciones2').style.display = 'none'; 
document.getElementById('opciones1').style.display = 'block'; 
}
 

Por último, si se llega a la función alertContents cargamos la respesta y cambiamos el display de los div

Código Javascript:

function alertContents() {
....
if (http_request.status == 200) {
result = http_request.responseText;
document.getElementById('opciones2').innerHTML = result;
document.getElementById('opciones1').style.display = 'none'; 
document.getElementById('opciones2').style.display = 'block';
 

Suerte

[metacortex]

Oye me parece una excelente solución la de alternar block y none . La probaré ahora mismo y te comento. Gracias Adler.