【问题标题】:Checkbox Toggle Switch with Checked/Unchecked values带有选中/未选中值的复选框切换开关
【发布时间】:2013-09-23 19:49:50
【问题描述】:

我有一个向我的数据库提交数据的表单。 我目前有一个包含两个选项的下拉列表。为了简化事情,我想用(是/否或开/关)切换开关替换下拉列表。我认为复选框是处理此问题的最佳方法。这要求复选框有一个 checked 值 (ON) 和一个 unchecked 值 (OFF),我可以在表单中提交。

我已经研究了几种解决方案,但似乎无法让任何东西正常工作。

我已经尝试过这里描述的方式:Post the checkboxes that are unchecked,但是当复选框被选中时,提交的值是ON,OFF,而不是ON。

另一件事是我希望复选框显示其当前值。

我正在使用 ASP.NET 网页。

我希望一切都有意义。任何建议都会很棒。

【问题讨论】:

    标签: javascript asp.net checkbox asp.net-webpages


    【解决方案1】:

    我认为最好使用单选按钮。每对将具有相同的名称,每个按钮具有不同的值。只能检查每对中的一个,因此您将始终知道选择了哪个值(“on”或“off”)。这样可以避免处理未选中的复选框。

    【讨论】:

      【解决方案2】:

      由于复选框是布尔值,从技术上讲,您无需执行任何操作即可获得所需的数据。既然您知道表单中包含哪些复选框,为什么不让表单仅提交选中的复选框,然后将其与可用复选框列表进行比较以了解哪些复选框已关闭?

      编辑

      我想我明白困惑在哪里。

      有两种类型的布尔字段非常常见 - 一种是 True 或 False,另一种可以是 True、False 或 Null。这是一个重要的区别。

      对于第一种类型,使用复选框是完美的,因为通过收集所有“真”(或“开”)值,您也自动收集了假值。但是,使用第二个选项,使用复选框可能会有点混乱,您可能应该使用 <select> 而不是复选框。

      无论如何,如果您决定使用复选框,那么使用.checked 很容易查看复选框是否被选中。 Here's a jsfiddle 记录每个复选框 id 并告诉控制台它是否被选中。我使用了需要 chrome 的 console.log(),但显然你可以用你想要的任何东西(警报或函数或其他什么)替换它。

      $('button').on('click', function() {
            var chbx = $('input[type=checkbox]');    
            $.each(chbx, function( index, value ) {
                console.log(value.id+':'+value.checked);        
          });
      });
      

      如果您想为复选框添加值,您可以将自定义属性添加到输入标签 <input type='checkbox' myattr='whateva' > 并使用 jQuery 轻松访问它们(尽管这不适用于 IE8 或更早版本)。

      【讨论】:

      • 我想实际提交一个用于其他领域的值。
      • 应该没关系。这是一个布尔字段。通过仅获得“开启”值,您也获得了“关闭”值。我不明白你的意思是什么other areas。也许您应该展示一些代码,以便我们更好地了解您要做什么
      • 其他区域是指站点中的其他区域依赖于数据库中的真假值。
      • 没关系。但那有什么问题呢?如果我有一个用户表,它有几个布尔列,每个都必须是 True 或 False。如果它不是 True,那么它就是 False。它在数据库中。也许您正在使用 Null-BolleanField? (它允许布尔列为空以及真或假)。在这种情况下,<select> 会比复选框更合适。
      • 我添加了更完整的答案,希望能把事情弄清楚一点。
      【解决方案3】:

      您可以通过执行类似的操作来检查是否选中了一个框

      if(document.getElementById('yourCheckBox').checked) {
          // true
      } else {
          // false
      }
      

      我不相信未选中的复选框会将任何内容传递给您的服务器脚本,因此在服务器端检查传递的 id 是否为空。如果它的空做某事,否则它不是空的并做其他事情。

      希望我正确理解了您的问题。

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2013-02-26
        • 2017-11-07
        • 2016-01-17
        • 2021-01-25
        • 2013-05-28
        • 1970-01-01
        相关资源
        最近更新 更多