Machen Sie ein anderes Element sichtbar/nicht sichtbar basierend auf Checkbox Wert

Question

Ich lerne hier total! Ich spiele immer noch mit JS.

Wenn das Kontrollkästchen geändert wird, möchte ich, dass der Bereichsschieberegler inaktiv UND der Ausgang auf Null steht.

function outputUpdate(obj) { 
 
    obj.previousElementSibling.value = obj.value; 
 
} 
 

 
function handleClick(obj) { 
 
    obj.previousElementSibling.value = obj.value; 
 
}

<fieldset> 
 
    <legend><h3>Engine</h3></legend> 
 
    <output for="engine" id="engine">0</output> 
 
    <input id="engine" type="range" min="0" max="10" value="0" step="1" list="0-10" oninput="outputUpdate(this)"> 
 
    <input type="checkbox" name="engine-closed" id="engine-closed" onclick='handleClick(this);' value="0" /><label for="engine-closed">Closed</label> 
 
</fieldset>

Ich bin nicht sicher, wie der Bereichsschieberegler inaktiv/unsichtbar auf Checkbox zu machen. Dann, wenn nicht markiert, Schieberegler aktiv/sichtbar machen.

Weiter, wie die Ausgabe Null zu machen, wenn sich das Kontrollkästchen ändert?

Bis jetzt, mit dem obigen Code, Schieberegler funktioniert gut und es aktualisiert die Ausgabe. Wenn das Kontrollkästchen aktiviert ist, wird der Schieberegler wie gewünscht auf Null gesetzt, aber nicht ausgegeben.

bearbeiten: es gibt etwa 20 verschiedene Formschieber mit Ausgängen. Es wäre also schön, die ID zu verwenden, die die Funktion aufgerufen hat, anstatt eine Variable zu deklarieren ...

Answer 1

hier mit minimalen Änderungen an Ihr Code :)

function outputUpdate(obj) { 
 
    obj.previousElementSibling.value = obj.value; 
 
} 
 

 
function handleClick(obj) { 
 
    obj.previousElementSibling.value = obj.value; 
 
    obj.previousElementSibling.disabled = (obj.checked) ? true : false; 
 
}

<fieldset> 
 
    <legend> 
 
    <h3>Engine</h3> 
 
    </legend> 
 
    <output for="engine" id="engine">0</output> 
 
    <input id="engine" type="range" min="0" max="10" value="0" step="1" list="0-10" oninput="outputUpdate(this)"> 
 
    <input type="checkbox" name="engine-closed" id="engine-closed" onclick='handleClick(this); outputUpdate(this.previousElementSibling);' value="0" /> 
 
    <label for="engine-closed">Closed</label> 
 
</fieldset>

Sie können den Sichtbarkeits-Toggle-Teil hinzufügen, wenn Sie möchten.

Answer 2

Wenn Sie Ihre Checkbox vor den Bereichsschieberegler stellen möchten, können Sie dies sehr einfach mit CSS tun Adjacent Sibling Selector und die :checked pseudo class Geschwisterelemente gezielt nach einem input geprüft:

function outputUpdate(obj) { 
 
    obj.previousElementSibling.value = obj.value; 
 
} 
 

 
function handleClick(obj) { 
 
    obj.previousElementSibling.value = obj.value; 
 
}

#engine-closed:checked ~ #engine {display:none;}

<fieldset> 
 
    <legend><h3>Engine</h3></legend> 
 
    <input type="checkbox" name="engine-closed" id="engine-closed" onclick='handleClick(this);' value="0" /> 
 
    <output for="engine" id="engine">0</output> 
 
    <input id="engine" type="range" min="0" max="10" value="0" step="1" list="0-10" oninput="outputUpdate(this)"> 
 
    <label for="engine-closed">Closed</label> 
 
</fieldset>

Wenn Sie eine JS-Lösung wollen, dann einfach die Elemente Sichtbarkeit umschalten, wenn das Kontrollkästchen wie so festgelegt ist: (aKTUALISIERT fertig zu werden mit mehreren insta nces)

(function(){ 
 
    function initWierdCloseRangeThingThatMakesNoSense(el){ 
 
     var engine = el.querySelector("input[type='range']"), 
 
     output = el.querySelector("output"), 
 
     engineClosed = el.querySelector("input[type='checkbox']"), 
 
     setOutput = function(){ 
 
     output.value = engine.value; 
 
     }, 
 
     openClose = function(){ 
 
     engine.style.display = (this.checked)?"none":""; 
 
     engine.value = "0"; 
 
     setOutput(); 
 
     };  
 
    engine.addEventListener("change", setOutput, false); 
 
    engineClosed.addEventListener("change", openClose, false); 
 
    }; 
 

 
    
 
// for every fieldset: 
 
    var fieldsets = document.querySelectorAll("fieldset"); 
 
    
 
    for (i=0; i<fieldsets.length; ++i){ 
 
    var fs = fieldsets[i]; 
 
    initWierdCloseRangeThingThatMakesNoSense(fs); 
 
    } 
 
    
 

 
})();

<fieldset> 
 
    <legend><h3>Engine</h3></legend> 
 
    <output for="engine" id="output">0</output> 
 
    <input id="engine" type="range" min="0" max="10" value="0" step="1" list="0-10"> 
 
    <input type="checkbox" name="engine-closed" id="engine-closed" value="0" /> 
 
    <label for="engine-closed">Closed</label> 
 
</fieldset> 
 
<fieldset> 
 
    <legend><h3>Engine 2</h3></legend> 
 
    <output for="engine2">0</output> 
 
    <input type="range" min="0" max="10" value="0" step="1" list="0-10"> 
 
    <input type="checkbox" name="engine-2-closed" value="0" /> 
 
    <label for="engine-3-closed">Closed</label> 
 
</fieldset> 
 
<fieldset> 
 
    <legend><h3>Engine 3</h3></legend> 
 
    <output for="engine3">0</output> 
 
    <input type="range" min="0" max="10" value="0" step="1" list="0-10"> 
 
    <input type="checkbox" name="engine-3-closed" value="0" /> 
 
    <label for="engine-3-closed">Closed</label> 
 
</fieldset>

Noch besser ist es, wenn Sie sich für eine JS-Lösung verwenden werden @adeneo's weil es überlegen;)

Answer 3

Im Grunde diese:

function outputUpdate(obj) { 
 
    obj.previousElementSibling.value = obj.value; 
 
} 
 

 
function handleClick(obj) { 
 
    // grab the slider element (a.k.a. engine) 
 
    var engine = obj.previousElementSibling; 
 
    // grab the result element (a.k.a. output) 
 
    var output = engine.previousElementSibling; 
 
    // grab the checkbox's name 
 
    var checkBoxName = obj.name; 
 
    console.log('Name:', checkBoxName) 
 
    // these are both grabbed relative to the 
 
    // the checkbox, so you can have as many 
 
    // of these fieldsets as you want, and 
 
    // they will not interfere with each other. 
 
    
 
    // set the out to zero 
 
    output.value = 0 
 
    
 
    if (obj.checked) { // "closed" is checked 
 
    engine.disabled = true; // hide the slider 
 
    } else { 
 
    engine.disabled = false; // otherwise, show it 
 
    } 
 
    obj.previousElementSibling.value = obj.value; 
 
}

<fieldset> 
 
    <legend><h3>Engine</h3></legend> 
 
    <output for="engine">0</output> 
 
    <input type="range" min="0" max="10" value="0" step="1" list="0-10" oninput="outputUpdate(this)"> 
 
    <input type="checkbox" name="engine-closed" onclick='handleClick(this);' value="0" /> <label for="engine-closed">Closed</label> 
 
</fieldset> 
 

 
<fieldset> 
 
    <legend><h3>Dash/Console</h3></legend> 
 
    <output for="dask-console" id="dask-console">0</output> 
 
    <input id="dash-console" type="range" min="0" max="10" value="0" step="1" list="0-10" oninput="outputUpdate(this)"> 
 
    <input type="checkbox" name="dash-console-closed" onclick='handleClick(this);' value="0"><label for="dash-console-closed">Closed</label> 
 
</fieldset>

Answer 4

Entfernen Sie alle Inline-Javascript und verwenden Sie stattdessen addEventListener.
Dann können Sie nur die Elemente erhalten, die Ereignisse in einer Schleife binden, und die anderen Elemente verweisen this durch die Verwendung und bekommen die Geschwister usw.

var ranges = document.querySelectorAll('fieldset input[type=range]'); 
 
var boxes = document.querySelectorAll('fieldset input[type=checkbox]'); 
 

 
[].slice.call(ranges).forEach(function(range) { 
 
    range.addEventListener('input', function() { 
 
    this.previousElementSibling.value = this.value; 
 
    }); 
 
}); 
 

 
[].slice.call(boxes).forEach(function(box) { 
 
    box.addEventListener('change', function() { 
 
    var range = this.previousElementSibling; 
 
    var event = new Event('input'); 
 

 
    range.value = 0; 
 
    range.dispatchEvent(event); 
 
    range.disabled = this.checked; 
 
    }); 
 
});

<fieldset> 
 
    <legend><h3>Engine</h3></legend> 
 
    <output for="engine" id="engine">0</output> 
 
    <input id="engine" type="range" min="0" max="10" value="0" step="1" list="0-10"> 
 
    <input type="checkbox" name="engine-closed" id="engine-closed" value="0" /> 
 
    <label for="engine-closed">Closed</label> 
 
</fieldset>