Question

我完全在这里学习！我还在玩JS。

当复选框被更改时，我希望范围滑块处于非活动状态，输出为零。

public class StatusLogRepo : GenericRepo<StatusLog>
{
     public override Task UpdateAsync(StatusLog statusLog)
     {
           throw new NotSupportedException();
     }

     public override Task DeleteAsync(StatusLog statusLog)
     {
           throw new NotSupportedException();
     }
}

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

我不确定如何使复选框上的范围滑块处于非活动/不可见状态。然后，当未选中时，使滑块再次激活/可见。

此外，如何在复选框更改时使输出为零？

到目前为止，使用上面的代码，滑块效果很好，它会更新输出。选中复选框后，滑块会根据需要变为零，但不会输出。

编辑：大约有20种不同的表格滑块带有输出。因此，使用调用函数的id而不是声明var ...

会更好

Answer 1

删除所有内联JavaScript，然后使用addEventListener 然后你可以只获取元素，在循环中绑定事件，并使用this引用其他元素并获取兄弟姐妹等。

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>

Answer 2

如果您乐意将复选框放在范围滑块之前，那么只需使用CSS Adjacent Sibling Selector和:checked pseudo class定位兄弟元素后，我就可以非常简单地执行此操作{ {1}}：

＆＃13;

input

＆＃13;

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

＆＃13;

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

＆＃13;

如果您想要一个JS解决方案，那么只需在复选框设置时切换元素可见性:(更新以应对多个实例）

＆＃13;

<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>

＆＃13;

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

＆＃13;

更好的是，如果您正在寻求JS解决方案，请使用@adeneo's，因为它更优越;）

Answer 3

此处，对代码的更改很少：）

function outputUpdate(obj) {
  obj.previousElementSibling.value = obj.value;
}

function handleClick(obj) {
  obj.previousElementSibling.value = obj.value;
  obj.previousElementSibling.disabled = obj.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" 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 4

基本上就是这样：

＆＃13;

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

＆＃13;

<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>

＆＃13;

根据复选框值使另一个元素可见/不可见

4 个答案: