获取表中引导开关的当前状态

时间:2016-10-20 10:14:06

标签: javascript jquery twitter-bootstrap

我实现了自举开关并将状态更改为ActiveInactive。我希望在切换表后捕获引导开关的状态。但每当我尝试捕获状态时,它始终只显示On。当引导开关切换为Inactive时,状态应该被捕获为off,但它不会发生。
JSFiddle链接:https://jsfiddle.net/4erLr6ak/
HTML CODE:

<p class="lead">Multiple prices</p>
<div class="col-md-2">
  <input type="text" id="type" name="type" value="" class="login password-field form-control" placeholder="Type of ticket" />
</div>
<div class="col-md-2">
  <select class="form-control" id="multi">
    <option value="USD">$ USD</option>
    <option value="SGD">$ SGD</option>
    <option value="EUR">€ EUR</option>
    <option value="AUD">$ AUD</option>
    <option value="JPY">¥ JPY</option>
    <option value="CHN">¥ CHN</option>
    <option value="THB">฿ THB</option>
    <option value="MYR">RM MYR</option>
  </select>
</div>
<div class="col-md-2">
  <input type="number" id="ticketprice" name="price" value="" class="login password-field form-control" placeholder="Price of ticket" />
</div>
<div class="col-md-2">
  <input type="checkbox" name="my-checkbox" data-on-text="Active" data-off-text="Inactive" checked>
</div>
<div class="col-md-4">
  <button type="button" class="btn btn-primary" id="confirm">Confirm</button>
</div>
<table class="table table-bordered multtable" style="margin-top: 7%;">
  <thead>
    <tr>
      <th>Type of ticket</th>
      <th>Price of ticket</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>  

Javascript code:

$('#confirm').click(function(e) {
  var type = $('#type').val();
  var currency = $("#multi option:selected").val();
  var mprice = $('#ticketprice').val();
  var status = $("[name='my-checkbox']").val();

  $('.multtable').append('<tr><td>' + type + '</td><td>' + currency + ' ' + mprice + '</td><td>' + status + '</td></tr>');

  /*Clear the values in text boxes after adding to table*/
  document.getElementById("type").value = "";
  document.getElementById("ticketprice").value = "";

  console.log(e);
})
$("[name='my-checkbox']").bootstrapSwitch();  

1 个答案:

答案 0 :(得分:1)

检查复选框是否已选中使用:

var status = $("[name='my-checkbox']").is(':checked');

而不是:

var status = $("[name='my-checkbox']").val();

您可以使用true / false输出相应地设置值