使用函数声明为每个复选框分割数组

时间:2016-07-28 03:27:58

标签: javascript jquery arrays

我只是询问是否可以在每个复选框中提醒数组内的文本,如果先检查 SOME TEXT ,它会提醒第一个数组以及是否检查了第二行它将警告第二个阵列,依此类推等等

例如这是HTML

<div id="inside">
  <label><input type="checkbox">SOME TEXT</label><br/>
  <label><input type="checkbox">SOME TEXT</label><br/>
  <label><input type="checkbox">SOME TEXT</label><br/>
  <label><input type="checkbox">SOME TEXT</label><br/>
  <label><input type="checkbox">SOME TEXT</label><br/>
  <label><input type="checkbox">SOME TEXT</label><br/>
  <label><input type="checkbox">SOME TEXT</label><br/>
</div>

这是脚本

jQuery(function(){
         var text = [
            "text 1",
            "text 2",
            "text 3",
            "text 4",
            "text 5",
            "text 6",
            "text 7"
        ];

        jQuery("input[type='checkbox']").click(function(){
          var y = jQuery(this).closest(label);
          jQuery(y).each(function(){
              if(jQuery(this).is(":checked")){

                 display(text) //function called

              }
           });
        });
    });

这是被调用函数

function display(x){
        var dis = "";
        for(var i = 0; i< x.length; i++){
            dis += alert(x[i]);
        }
        return dis;
    }

1 个答案:

答案 0 :(得分:1)

您可以获取已选中复选框的索引,然后在同一索引中提醒/记录该项目。

jQuery(function($) {
  var text = [
    "text 1",
    "text 2",
    "text 3",
    "text 4",
    "text 5",
    "text 6",
    "text 7"
  ];

  var $checks = $("input[type='checkbox']").click(function() {
    var idx = $checks.index(this);
    display(text[idx]);
  });
});


function display(x) {
  console.log(x);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="inside">
  <label>
    <input type="checkbox">SOME TEXT</label>
  <br/>
  <label>
    <input type="checkbox">SOME TEXT</label>
  <br/>
  <label>
    <input type="checkbox">SOME TEXT</label>
  <br/>
  <label>
    <input type="checkbox">SOME TEXT</label>
  <br/>
  <label>
    <input type="checkbox">SOME TEXT</label>
  <br/>
  <label>
    <input type="checkbox">SOME TEXT</label>
  <br/>
  <label>
    <input type="checkbox">SOME TEXT</label>
  <br/>
</div>