在 html 中使用 javascript 进行开/关开关答案

【问题标题】：on/off switch with javascript in html在 html 中使用 javascript 进行开/关开关
【发布时间】：2013-05-29 04:17:34
【问题描述】：

我有一个代码，它有一个用于禁用/启用表单输入的开/关开关，但它不起作用。我的输入总是关闭。有什么问题？

<script>  
   function DisEn(X){  
      if(X.checked)Allow=false;  
      else Allow=true;  
      document.A.T1.disabled=Allow;  
      document.A.T2.disabled=Allow;  
   }  
</script>
</head>

<body>
   <form name="A" >
      <span class="toggle-bg">
         <input type="radio" name="toggle" value="off" >
         <input type="radio" name="toggle" value="on">
         <span class="switch"></span>
      </span>
      <input type="text" name="T1" value="A" disabled>  
      <input type="text" name="T2" value="B" disabled>  
   </form>
</body>
</html>

【问题讨论】：

Java 不是 JavaScript。
是的，我弄错了。
您缺少一些 var 声明和一些用于初学者的 {}。
@Phillip：你能解释一下吗？我放了一些{}用于图形切换。
在 JavaScript 中，您需要在要声明的每个新变量前面添加 var 语句。此外，您需要将 if else 语句的执行部分包装在 {} 中。我建议您看一下这个，它对确保您了解 JavaScript 的基础知识非常有帮助。 developer.mozilla.org/en-US/docs/Web/JavaScript/…

标签： php javascript forms templates smarty

【解决方案1】：

我稍微修改了你的代码逻辑，但它确实有效。

源代码

<script>  
   function DisEn(X){  
      document.A.T1.disabled=X;
      document.A.T2.disabled=X;
   }  
</script>
</head>

<body>
   <form name="A" >
      <span class="toggle-bg">
         <input type="radio" name="toggle" value="off" onClick="DisEn(false)">
         <input type="radio" name="toggle" value="on" onClick="DisEn(true)">
         <span class="switch"></span>
      </span>
      <input type="text" name="T1" value="A" disabled>  
      <input type="text" name="T2" value="B" disabled>  
   </form>
</body>
</html>

最终结果

说明

当您单击其中一个单选按钮时，它会为DisEn 函数提供一个布尔值，并根据它设置disabled 参数。

【讨论】：

：现在，我想要一个提交键，当我按下它时，如果切换键在提交键上，则传递一个 value=on（或 value=1），如果是 off，则传递一个值=off（或 value=0），因为在另一页我必须知道它是什么，打开或关闭
如果您想将值传递到一个全新的页面，那么请查看 HTTP POST 和 GET 方法，也许是 PHP。或者您可以使用 AJAX/JavaScript/JQuery 删除您使用的表单并添加一个新表单。
我想在另一个页面中知道，我的 html 页面中的开关是打开还是关闭。

【解决方案2】：

这是另一种方法，不涉及使用内联 onClick。出于这个原因，我将脚本移到了 body 标记的末尾，以便在我们开始在 JavaScript 中处理它们之前，这些元素在 DOM 中可用。代码 cmets 解释了发生了什么。

原版 JavaScript

<html>
<head>
</head>
<body>
<form name="A" >
<span class="toggle-bg">
<input type="radio" name="toggle" value="off" >
<input type="radio" name="toggle" value="on">
<span class="switch"></span>
</span>
<input type="text" name="T1" value="A" disabled>  
<input type="text" name="T2" value="B" disabled>  
</form>

<script>

// First, get a collection of the radio inputs with the name 'toggle'
var toggles = document.getElementsByName('toggle');

// Loop through each radio input with the name 'toggle' and add an event listener
// to each toggle input so it knows what to do when a user clicks it.
for (var i = 0; i < toggles.length; i++) {
    toggles[i].addEventListener('click', function(event) {

        // Assign 'Allow' the value of the target. The target will be the radio
        // input that the user clicks. The value is simply the value you have set
        // above in your code - 'on' or 'off'.
        var Allow = event.target.value;

        // Check for the value of 'off' or 'on'
        if (Allow === 'off') {
            // Value is 'off', so disable the text inputs.

            // document.GetElementsByName() returns an array of elements. Because of this,
            // we have to use the [0] after we call it to get the first element in the array.
            // Because each element must have a unique name, this will grab the correct text
            // inputs to target.
            document.getElementsByName('T1')[0].disabled = true;
            document.getElementsByName('T2')[0].disabled = true;
        } else {
            // Value is 'on', so enable the text inputs.

            document.getElementsByName('T1')[0].disabled = false;
            document.getElementsByName('T2')[0].disabled = false;
        }

    }, false);
}

</script>
</body>
</html>

jQuery 解决方案

<html>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $('input:radio[name=toggle]').click(function(event) {
        if (event.target.value == 'on') {
            $('input:text[name=T1], input:text[name=T2]').removeAttr("disabled");
        } else {
            $('input:text[name=T1], input:text[name=T2]').attr("disabled", "disabled");
        }
    });
});
</script>
</head>
<body>
<form name="A" >
<span class="toggle-bg">
<input type="radio" name="toggle" value="off" >
<input type="radio" name="toggle" value="on">
<span class="switch"></span>
</span>
<input type="text" name="T1" value="A" disabled>  
<input type="text" name="T2" value="B" disabled>  
</form>
</body>
</html>

【讨论】：

使用 jQuery 最多可以将整个混乱减少到几行——更不用说文档准备功能了。
@Phillip 是的，我同意 100%。原始帖子没有提到 jQuery，所以我没有费心提供包含 jQuery 作为要求的答案。