如何获取数组对象内的检查元素

时间：2019-06-10 07:20:07

标签： javascript jquery html css

我在UI上有一个选择字段，该字段随我的变化而变化。div中的各个数据分别有ul和li，现在我想做的是list有复选框on，of，因此无论用户选择什么，只要单击按钮，我都希望将其转换为数组对象

我做了什么 

$(document).ready(function() {
  $("#btn-search").hide();
  var Data = {
    "India A": [
      "Mumbai",
      "Delhi",
      "Kolkata"
    ],
    "India B": [
      "Bangalore",
      "Chennai"
    ]
  }
  var CountersName = Object.keys(Data)

  let dropdown = $("#counterNames")
  dropdown.append('<option selected="true" disabled>Select Counter</option>');
  for (var i = 0; i < CountersName.length; i++) {
    $('<option/>').val(CountersName[i]).html(CountersName[i]).appendTo('#counterNames');
  }
  $("#counterNames").on('change', function() {
    $(".card").show();
    $("#btn-search").show();
    var value = $(this).val();

    $(".card-header").text(value);
    // console.log(Data[value]);

    var ul = document.getElementById(".list-group");
    ul_innerhtml = "";
    for (i = 0; i < Data[value].length; i++) {
      title = Data[value][i];

      var ul_innerhtml = ul_innerhtml + '<li class="list-group-item">' + title + '<label class="switch "><input type="checkbox" class="success"><span class="slider round"> </span></label></li>';
    }
    $(".list-group").html(ul_innerhtml);

  })

});



$("button").click(function() {
  var selected = new Array(); // here I am trying to do


  $("input:checkbox[name=type]:checked").each(function() {
    selected.push($(this).val());
  });

  console.log(selected)

});
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  float: right;
}


/* Hide default HTML checkbox */

.switch input {
  display: none;
}


/* The slider */

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input.success:checked+.slider {
  background-color: #8bc34a;
}

input:checked+.slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}


/* Rounded sliders */

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container">
  <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
    <label for="counterNames">Select Counter:</label>
    <select class="form-control" id="counterNames">
    </select>

    <div class="card" style="margin: 10px 0; display: none;">

      <div class="card-header"></div>

      <ul class="list-group list-group-flush">


      </ul>
    </div>
  </div>
  <button id="btn-search" class="btn btn-default commonButton" type="submit">
			<i class="fa fa-search"></i>&nbsp;Go
		</button>
</div>

当用户单击“执行”按钮时，我要检索选择了哪个选择选项，然后在选择{India A:["Mumbai","Delhi","Kolkata"]}时像India A一样选中了哪个选项，我尝试将其首先放入数组，但是显示为空

2 个答案:

答案 0 :(得分：3)

您的代码中有3个错误。

  1. 您没有将value添加到您的复选框；
  2. 您错过了将名称添加到复选框的操作。但是您在获取价值时就使用了它。
  3. 您错过了获得选择框的价值。您想将其定义为对象并将值推入其中。

$(document).ready(function() {
  $("#btn-search").hide();
  var Data = {
    "India A": [
      "Mumbai",
      "Delhi",
      "Kolkata"
    ],
    "India B": [
      "Bangalore",
      "Chennai"
    ]
  }
  var CountersName = Object.keys(Data)

  let dropdown = $("#counterNames")
  dropdown.append('<option selected="true" disabled>Select Counter</option>');
  for (var i = 0; i < CountersName.length; i++) {
    $('<option/>').val(CountersName[i]).html(CountersName[i]).appendTo('#counterNames');
  }
  $("#counterNames").on('change', function() {
    $(".card").show();
    $("#btn-search").show();
    var value = $(this).val();

    $(".card-header").text(value);
    // console.log(Data[value]);

    var ul = document.getElementById(".list-group");
    ul_innerhtml = "";
    for (i = 0; i < Data[value].length; i++) {
      title = Data[value][i];

      var ul_innerhtml = ul_innerhtml + '<li class="list-group-item">' + title + '<label class="switch "><input name="type" type="checkbox" class="success" value="' + title + '"><span class="slider round"> </span></label></li>';
    }
    $(".list-group").html(ul_innerhtml);

  })

});



$("button").click(function() {
  var selected = {};
  var type = $("#counterNames").val();
  selected[type] = [];


  $("input:checkbox[name=type]:checked").each(function() {
    selected[type].push($(this).val());
  });

  console.log(selected)

});
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  float: right;
}


/* Hide default HTML checkbox */

.switch input {
  display: none;
}


/* The slider */

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input.success:checked+.slider {
  background-color: #8bc34a;
}

input:checked+.slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}


/* Rounded sliders */

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container">
  <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
    <label for="counterNames">Select Counter:</label>
    <select class="form-control" id="counterNames">
    </select>

    <div class="card" style="margin: 10px 0; display: none;">

      <div class="card-header"></div>

      <ul class="list-group list-group-flush">


      </ul>
    </div>
  </div>
  <button id="btn-search" class="btn btn-default commonButton" type="submit">
    <i class="fa fa-search"></i>&nbsp;Go
	</button>
</div>

答案 1 :(得分：0)

您的逻辑的主要问题是选择器正在寻找具有name属性的复选框，但是当您在选择更改时附加li元素时，您并没有添加它。 / p>

类似地，您需要在复选框中添加一个value，否则它们的所有值将只是字符串'on'，这用处不大。 

var ul_innerhtml = ul_innerhtml + '...<input type="checkbox" class="success" name="type" value="' + title + '">...';

最后请注意，您可以使用map()从jQuery对象创建值数组，这样就无需显式的each()循环。试试这个：

$(document).ready(function() {
  $("#btn-search").hide();
  var Data = {
    "India A": [ "Mumbai", "Delhi", "Kolkata" ],
    "India B": [ "Bangalore", "Chennai" ]
  }
  var CountersName = Object.keys(Data)
  let dropdown = $("#counterNames")
  dropdown.append('<option selected="true" disabled>Select Counter</option>');
  
  for (var i = 0; i < CountersName.length; i++) {
    $('<option/>').val(CountersName[i]).html(CountersName[i]).appendTo('#counterNames');
  }
  
  $("#counterNames").on('change', function() {
    $(".card").show();
    $("#btn-search").show();
    var value = $(this).val();
    $(".card-header").text(value);

    var ul_innerhtml = "";
    for (i = 0; i < Data[value].length; i++) {
      title = Data[value][i];
      ul_innerhtml = ul_innerhtml + '<li class="list-group-item">' + title + '<label class="switch "><input type="checkbox" class="success" name="type" value="' + title + '"><span class="slider round"> </span></label></li>';
    }
    $(".list-group").html(ul_innerhtml);
  })
});

$("button").click(function() {
  var selected = $(".success:checked").map(function() {
    return this.value.trim();
  }).get();
  console.log(selected)
});
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  float: right;
}


/* Hide default HTML checkbox */

.switch input {
  display: none;
}


/* The slider */

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input.success:checked+.slider {
  background-color: #8bc34a;
}

input:checked+.slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}


/* Rounded sliders */

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container">
  <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
    <label for="counterNames">Select Counter:</label>
    <select class="form-control" id="counterNames"></select>
    <div class="card" style="margin: 10px 0; display: none;">
      <div class="card-header"></div>
      <ul class="list-group list-group-flush"></ul>
    </div>
  </div>
  <button id="btn-search" class="btn btn-default commonButton" type="submit">
    <i class="fa fa-search"></i>&nbsp;Go
  </button>
</div>

相关问题
最新问题