如何在jQuery中获取引导切换按钮的值

fafcakar 于 2023-01-25 发布在 jQuery

关注(0)|答案(6)|浏览(148)

我有这个标记和jQuery，但是我不能成功地捕获按钮值或开/关或任何形式的切换设置识别：

- 超文本标记语言**

<div class="form-group">
    <label class="col-md-2 control-label" for="payMethod">Payment Method</label>
      <div class="col-md-2">
        <label class="checkbox-inline bootstrap-switch-noPad" for="payMethod">
          <input type="checkbox" id="payMethod" name="payMethod" data-size="small" value="Credit" data-on-text="Credit" data-on-color="success" data-off-text="Cash" data-off-color="warning" tabindex="13">
        </label>
      </div>
  </div>

- jQuery软件**

$('#payMethod').on( 'change', function() {
  alert('slid');
}); // does not work

$( "#payMethod" ).click(function() {
  alert( $('#payMethod').val() );
}); // does not work

$('#payMethod').change(function() {
  alert('Toggle: ' + $(this).prop('checked'));
}); // does not work

$('input[type=checkbox][name=payMethod]').change(function() {
  alert('help'); // does not work
});

以下是滑块按钮（没有复选框）：第一节第一节第一节第一节第一次

jquery

来源：https://stackoverflow.com/questions/33621053/how-to-get-the-value-of-a-bootstrap-toggle-button-in-jquery

6条答案

按热度按时间

idv4meu81#

你可以试试这个

$("#payMethod").change(function(){
    if($(this).prop("checked") == true){
       //run code
    }else{
       //run code
    }
});

赞(0）回复(0）举报 2023-01-25

qmelpv7a2#

你可以这样简单地使用：如果在html代码中使用id=abc进行引导切换。

$('#abc').prop('checked')

输出为：真或假。（打开切换时为真，关闭切换时为假）

赞(0）回复(0）举报 2023-01-25

lp0sw83n3#

我猜脚本放在HTML标记之前？如果是，那么将脚本移到Html标记之后，或者将脚本放在jQuery函数中，如下所示：

$(function()
{

    $('#payMethod').on( 'change', function() {
         alert('slid');
    }); // does not work

    $( "#payMethod" ).click(function() {
         alert( $('#payMethod').val() );
    }); // does not work

    $('#payMethod').change(function() {
        alert('Toggle: ' + $(this).prop('checked'));
    }); // does not work

    $('input[type=checkbox][name=payMethod]').change(function() {
        alert('help'); // does not work
    });
});

最佳实践是使用后一种方法，它将脚本放在jQuery函数中，因为脚本将在所有HTML标记呈现之后呈现。

赞(0）回复(0）举报 2023-01-25

yyyllmsg4#

你的脚本应该需要在html正文内。

<Body>
    <div class="form-group">
        <label class="col-md-2 control-label" for="payMethod">Payment Method</label>
            <div class="col-md-2">
                <label class="checkbox-inline bootstrap-switch-noPad" for="payMethod">
                    <input type="checkbox" id="payMethod" name="payMethod" data-size="small" value="Credit" data-on-text="Credit" data-on-color="success" data-off-text="Cash" data-off-color="warning" tabindex="13">
                </label>
            </div>
        </div>
    <script>
        $('#payMethod').on( 'change', function() {
            alert('slid');
        });
    </script>
</Body>

赞(0）回复(0）举报 2023-01-25

mutmk8jj5#

使用ChromeDevTool Ctrl+Shift+i-〉Element。我右键单击切换按钮并选择inspect。然后，我将按钮切换为开和关。然后，只有我意识到，触发的事件不是在input元素上，而是由BootstrapToggle添加的div。

因此，在我的代码中，我将listener添加到前面提到的div中，然后读取切换按钮的状态。

$('div[data-toggle="toggle"]').click(function() {
      console.log( "toggle_show_cancelled value: " + $("#toggle_show_cancelled").prop("checked"))
    })

赞(0）回复(0）举报 2023-01-25

up9lanfz6#

$('body').on('click', '#payMethod', function (e) {
if($(this).prop("checked") == true){
  console.log("Checkbox is checked.");
}else{
  console.log("Checkbox is unchecked.");
}

试试这个：

赞(0）回复(0）举报 2023-01-25

我来回答

如何在jQuery中获取引导切换按钮的值

6条答案

相关问题

热门标签

最新问答