チェックボックスの値に基づいて別の要素を表示/非表示にします

Question

私は完全にここで学んでいます！私はまだJSと遊んでいます。

チェックボックスを変更すると、範囲スライダを非アクティブにし、出力をゼロにします。

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>

私は、チェックボックスに見えない/範囲スライダを非アクティブにするかどうかはわかりません。 それからチェックを外すと、スライダーが再びアクティブ/可視になります。

さらに、チェックボックスが変更されたときに出力をゼロにする方法はありますか？

これまでのところ、上記のコードでは、スライダがうまく動作し、出力を更新します。 チェックボックスをオンにすると、スライダは希望通りにゼロになりますが、出力されません。

編集：出力のある約20種類のフォームスライダがあります。したがって、変数を宣言するのではなく関数を呼び出すIDを使用するとよいでしょう。

Answer 1

兄弟をthisを使用して取得することにより、他の要素を参照することができますあなたのコード:)

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>

必要に応じて、表示切り替え部分を追加できます。

Answer 2

範囲スライダの前にチェックボックスを置いて喜んですれば、 Adjacent Sibling Selectorと確認input後に兄弟要素をターゲットにする:checked pseudo class：

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>

を使用すると、JSのソリューションをしたい場合は、チェックボックスがそうのように設定されている場合は、単に要素の表示を切り替える：（対処するために更新複数の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>

ベター、それは優れただので、あなたはJSソリューションの使用@adeneo'sためつもりなら;）

Answer 3

基本的にこの：

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

すべてのインラインJavaScriptを削除し、代わりにaddEventListenerを使用してください。
は、次に、あなただけの、要素を取得するループ内でイベントをバインド、およびへの最小限の変更で、など。ここ

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>