Question

已经编写了一个小代码，允许我单击变量，并在单击按钮时展示相同的相应数据。但是，这似乎没有发生，我不确定在哪里出错。

在此方面的任何帮助将不胜感激，因为我多次重新编写了代码，但无济于事。

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

Answer 1

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>

Answer 2

您应该使用方括号[]来动态访问对象/ 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>

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

Answer 4

尤其是@ 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()]);
        }
        });
        $('#divResult').html(resultString);
        });
    });

    function PrintHtml(obj){
        var html='<div class="opt">';
        if (obj){
            $.each(obj, function(k,v){
                html += '<div>'+k+' : '+v+'</div>'; 
            });
        }
        html += '</div>';
        return html;
    }

         .opt{
             margin: 10px;
             padding: 10px;
             background: #eee;
             border: 1px solid #222;
         }

 <!DOCTYPE html>
    <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>

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

4 个答案: