Question

我遇到一个问题，我需要将复选框中的值放入数组中，然后在数组上使用toString（）并将数组内容写入div。任何帮助将非常感激。

<form id="form" action="" onsubmit="return false">
        <div id="inputs" class="alignAndWhiteText">
            <div style="margin-left:80px">
                <label>List music in the order you prefer</label>
                <hr style="margin-right:80px"/>
                <div id="selections">
                <input type="checkbox" id="popMusic">Pop Music<br>
                <input type="checkbox" id="metalMusic">Metal Music<br>
                <input type="checkbox" id="countryMusic">Country Music<br>
                <input type="checkbox" id="rapMusic">rap Music<br>
                <input type="checkbox" id="electronicMusic">Electronic  Music<br>
                </div>
                <div id="userFeedback" style="color:white;text-align:center"><p></p></div>
            </div>
        </div>
    </form>

$(document).ready(function(){
var music = ["","","","",""];
$('#popMusic').click(function(){
    music.push($('#popMusic').val());
});
$('#metalMusic').click(function(){
    music.push($('#metalMusic').val());
});
$('#countryMusic').click(function(){
    music.push($('#countryMusic').val());
});
$('#rapMusic').click(function(){
    music.push($('#rapMusic').val());
});
$('#electronicMusic').click(function(){
    music.push($('#electronicMusic').val());
});
music.toString();

    for(i = 0;i < music.length; i++){
        $('#userFeedback').html(music); 
    }

}）;

Answer 1

这是你想要的吗？我重构了代码并利用了jQuery的each。

＆＃13;

$(document).ready(function(){
var music = [];
  $( ".musicSelection" ).each(function( index ) {
    $(this).change(function() {
      if($(this).is(':checked')) {
          $('#userFeedback').append("<p>" + $(this).val() + "</p>");
         }
    });
         
   });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form" action="" onsubmit="return false">
        <div id="inputs" class="alignAndWhiteText">
            <div style="margin-left:80px">
                <label>List music in the order you prefer</label>
                <hr style="margin-right:80px"/>
                <div id="selections">
                <input class="musicSelection" type="checkbox" id="popMusic" value="Pop Music">Pop Music<br>
                <input class="musicSelection" type="checkbox" id="metalMusic" value="Metal Music">Metal Music<br>
                <input class="musicSelection" type="checkbox" id="countryMusic" value="Country Music">Country Music<br>
                <input class="musicSelection" type="checkbox" id="rapMusic" value="rap Music">rap Music<br>
                <input class="musicSelection" type="checkbox" id="electronicMusic" value="Electronic  Music">Electronic  Music<br>
                </div>
                <div id="userFeedback" style="color:tomato;text-align:center"><p></p></div>
            </div>
        </div>
    </form>

＆＃13;

Answer 2

好的，首先你忘记了所有结束输入标签。

此外，您在使用5个空索引填充阵列后。

为每个输入框添加值属性

循环遍历数组以显示列表，并使用.html（）将覆盖以前的值，因此您需要使用append。

  $(document).ready(function(){
  var music = [];
  $('#popMusic').click(function(){
    music.push($('#popMusic').val());
    $('#userFeedback').append("Pop Music<br>");
  });
  $('#metalMusic').click(function(){
    music.push($('#metalMusic').val());
      $('#userFeedback').append("Metal Music<br>");
  });
  $('#countryMusic').click(function(){
    music.push($('#countryMusic').val());
  $('#userFeedback').append("Country Music<br>");
  });
  $('#rapMusic').click(function(){
    music.push($('#rapMusic').val());
 $('#userFeedback').append("Rap Music<br>");
  });
  $('#electronicMusic').click(function(){
    music.push($('#electronicMusic').val());

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script>

    $(document).ready(function(){
      var music = [];
      $('#popMusic').click(function(){
        music.push($('#popMusic').val());
        $('#userFeedback').append("Pop Music<br>");
      });
      $('#metalMusic').click(function(){
        music.push($('#metalMusic').val());
          $('#userFeedback').append("Metal Music<br>");
      });
      $('#countryMusic').click(function(){
        music.push($('#countryMusic').val());
  $('#userFeedback').append("Country Music<br>");
      });
      $('#rapMusic').click(function(){
        music.push($('#rapMusic').val());
  $('#userFeedback').append("Rap Music<br>");
      });
      $('#electronicMusic').click(function(){
        music.push($('#electronicMusic').val());
  $('#userFeedback').append("Electronic Music<br>");
      });
      music.toString();
    });


</script>

  </head>
  <body>
    <form id="form" action="" onsubmit="return false">
        <div id="inputs" class="alignAndWhiteText">
            <div style="margin-left:80px">
                <label>List music in the order you prefer</label>
                <hr style="margin-right:80px"/>
                <div id="selections">
                <input type="checkbox" id="popMusic" value="Pop Music">Pop Music</input><br>
                <input type="checkbox" id="metalMusic" value="Metal Music">Metal Music</input><br>
                <input type="checkbox" id="countryMusic" value="Country Music">Country Music</input><br>
                <input type="checkbox" id="rapMusic" value="Rap Music">rap Music</input><br>
                <input type="checkbox" id="electronicMusic" value="Electronic Music">Electronic  Music</input><br>
                </div>

            </div>
        </div>
    </form>
      <div id="userFeedback" style="text-align:center"><p></p></div>
  </body>
</html>

＆＃13;

Answer 3

这是另一种采用以下方法的解决方案：

使用value属性存储特定输入的值
使用name属性＆＃34; cluster＆＃34;音乐输入。现在您可以按名称选择这些输入。
使用事件委派设置事件回调。这意味着回调函数不会设置为每个输入元素，而只会在父元素（在本例中为#selections）上设置一次，这样会更有效。

更新：点击后输入将被禁用，以防止无穷无尽的列表。

＆＃13;

$(document).ready(function(){

var result = [];

$('#selections').on('click', 'input[name="music"]', function () {
    var $input = $(this);

    // add to the order list
    result.push($input.val());

    // disable input
    $input.prop('disabled', true);

    // show result
    $('#userFeedback').html(result.join('<br>'));
});

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="selections">
    <input type="checkbox" name="music" value="Pop Music">Pop Music <br>
    <input type="checkbox" name="music" value="Metal Music">Metal Music<br>
    <input type="checkbox" name="music" value="Country Music">Country Music<br>
    <input type="checkbox" name="music" value="Rap Music">Rap Music<br>
    <input type="checkbox" name="music" value="Electronic  usic">Electronic Music<br>
</div>
<div id="userFeedback" style="text-align:center"></div>

＆＃13;

将元素分配给数组然后打印jquery

3 个答案: