从复选框中选择时显示jQuery JSON中的相应数据

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了从复选框中选择时显示jQuery JSON中的相应数据相关的知识，希望对你有一定的参考价值。

编写了一个小代码，允许我单击一个变量，并在单击按钮时显示相应的数据。然而，这似乎并没有发生，我不知道我在哪里出错了。

感谢任何帮助，因为我多次重写代码，但无济于事。

<script>
    $(document).ready(function(){
        var StatJSON = {
            "Opt1":  {
                "Name": "Mat",
                "Parameter1": "65",
                "Parameter2": "30"
            },
            "Opt2": {
                "Name": "Mik",
                "Parameter1": "62",
                "Parameter2": "40"
            }
        };

        $('#btnSubmit').click(function(){
            $('input[type="checkbox"]:checked').each(function() {
                var this_input = $(this);
                if (this_input.is(':checked')){
                  resultString += [StatJSON.$(this).val()];
                }

                $('#divResult').html(resultString);
            }
        });
    });
</script>
<html>
    <head>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    </head>

    <body>
        Options:
        <input type="checkbox" name="Station" value="Opt1">Option1
        <input type="checkbox" name="Station" value="Opt2">Option2
        <input type="checkbox" name="Station" value="Opt3">Option3
        <input id="btnSubmit" type="submit" value="submit" />
        <br /><br />
        
        <div id="divResult"></div>
    </body>
</html>
答案

您应该使用方括号表示法[]动态访问对象/ StatJson中的属性。在将值分配给resultString之前，您还应该检查属性是否在对象中

       $(document).ready(function(){
            var StatJSON = {
            "Opt1":  {
                "Name": "Mat",
                "Parameter1": "65",
                "Parameter2": "30"
            },
            "Opt2": {
                "Name": "Mik",
                "Parameter1": "62",
                "Parameter2": "40"
            }
        };

        $('#btnSubmit').click(function(){
            $('input[type="checkbox"]:checked').each(function() {
                var this_input = $(this);
                let resultString = '';
                if (this_input.is(':checked')){
                 if(StatJSON[$(this).val()]) {
                   resultString += StatJSON[$(this).val()]['Name'];
                 }
                 console.log(StatJSON[$(this).val()]);
                }
            $('#divResult').html(resultString);
            });
        });
    });
 
<html>
        <head>
            <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
        </head>

    <body>
    Options:
    <input type="checkbox" name="Station" value="Opt1">Option1
    <input type="checkbox" name="Station" value="Opt2">Option2
    <input type="checkbox" name="Station" value="Opt3">Option3
    <input id="btnSubmit" type="submit" value="submit" />
    <br /><br />
    <div id="divResult"></div>
    </body>
    </html>
另一答案
  1. 缺少表单标记
  2. 没有结束标记的复选框
  3. 使用属性获取StatJSON

$(document).ready(function(){
    var StatJSON = {
        "Opt1":  {
            "Name": "Mat",
            "Parameter1": "65",
            "Parameter2": "30"
        },
        "Opt2": {
            "Name": "Mik",
            "Parameter1": "62",
            "Parameter2": "40"
        }
    };
		
    $('#btnSubmit').click(function(){
        var resultString = '';
        $('input[type="checkbox"]:checked').each(function() {
            let opt = StatJSON[$(this).val()];
            if(opt)
                resultString += opt.Name;				
        });
        $('#divResult').html(resultString);
    });
});
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>

<body>
<form onsubmit="return confirm('Submit?')">
    Options:
    <input type="checkbox" name="Station" value="Opt1" />Option1
    <input type="checkbox" name="Station" value="Opt2" />Option2
    <input type="checkbox" name="Station" value="Opt3" />Option3
    <input id="btnSubmit" type="submit" value="submit" />
</form>
<br /><br />
<div id="divResult"></div>
</body>
</html>
另一答案
  • 在var resultString = '';之前的.each
  • StatJSON[$(this).val()]而不是[StatJSON.$(this).val()];
  • 在$('#divResult').html(resultString);循环后的.each() ..如果你需要它内部使用.append()而不是html()

$(document).ready(function(){
  var StatJSON = {
  "Opt1":  {
    "Name": "Mat",
    "Parameter1": "65",
    "Parameter2": "30"
  },
  "Opt2": {
    "Name": "Mik",
    "Parameter1": "62",
    "Parameter2": "40"
  }
  };
  $('#btnSubmit').click(function(){ 
    var resultString = '';
    $('input[type="checkbox"]:checked').each(function() {
      var this_input = $(this);
      if (this_input.is(':checked')){
        resultString += PrintHtml(StatJSON[$(this).val()]);
      }
    });
      $('#divResult').html(resultString);
  });
});


function PrintHtml(obj){
  var html='<div class="opt">'; // create div for opt with opt class
  if(obj){   // if obj is true
    $.each(obj ,function(k , v){  // loop through the obj and get key and value
      html += '<div>'+k +' : '+ v + '</div>';
    });
  }
  html += '</div>'; // close opt div
  return html;
}
.opt{
  margin : 10px;
  padding : 10px;
  background : #eee;
  border: 1px solid #222;
}
<html>
        <head>
            <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
        </head>

    <body>
    Options:
    <input type="checkbox" name="Station" value="Opt1">Option1
    <input type="checkbox" name="Station" value="Opt2">Option2
    <input type="checkbox" name="Station" value="Opt3">Option3
    <input id="btnSubmit" type="submit" value="submit" />
    <br /><br />
    <div id="divResult"></div>
    </body>
    </html>
另一答案

特别是@ Mohamed-Yousef。虽然@ Mohamed-Yousef提供的解决方案完美无缺，但我仍然面临的唯一问题是它为每个选择提供了一个在另一个之下的单独表格。

但是，由于关键元素对于所有选择保持相同，有没有一种方法，其中关键元素（行标题）出现在每个选择的相同位置，并且值（列）在右侧显示为每列时间选择？这将允许我比较单个表中的元素以进行多项选择，这是我想要做的。

再一次，非常感谢您从一个完整的初学者那里花时间和精力解决这些天真的问题。

更新的代码：

        jQuery(document).ready(function( $ ){
            var StatJSON = {
            "Opt1":  {
                "Name": "Mat",
                "Parameter1": "65",
                "Parameter2": "30"
            },
            "Opt2": {
                "Name": "Mik",
                "Parameter1": "62",
                "Parameter2": "40"
            },
            "Opt3": {
                "Name": "Mir",
                "Parameter1": "65",
                "Parameter2": "90"
            }
        };

        $('#btnSubmit').click(function(){ 
        var resultString = '';
        $('input[type="checkbox"]:checked').each(function() {
        var this_input = $(this);
        if (this_input.is(':checked')){
        resultString += PrintHtml(StatJSON[$(this).val()]);
        }
        });
        $('#divResul
以上是关于从复选框中选择时显示jQuery JSON中的相应数据的主要内容，如果未能解决你的问题，请参考以下文章
 

 选中复选框时jQuery隐藏div，未选中时显示


 当复选框兄弟姐妹更改为选中时显示警报


 Divs All Visible at Page opening（尽管有 jquery，在单选按钮单击时显示 div）


 在动态 jQuery 表单中选择特定选项时显示输入


 Ionic Angular Mobile App 在从项目中的文件中获取和显示 json-array 数据时显示错误---


 使用选中的复选框和 jQuery 更改选择选项