Question

我正在尝试使用.ajax传递一个布尔值（选中/未选中）值，但我无法使其工作。我已经阅读了很多关于如何使用.is(':checked')和.prop('checked')来获取复选框的价值，但我似乎无法做任何事情。

这是我的HTML：

<input type="checkbox" id="typeOfSearch" value="TRUE">
<label for="typeOfSearch">Exact Search?</label>

这是我的JavaScript

   $.ajax({
            url: 'partsTable.php',
            type: 'post',
            dataType: 'html',
            data: {
                major: $('select#dropdownMajor').val(),
                minor: $('select#dropdownMinor').val(),
                typeOfSearch: $('checkbox#typeOfSearch').prop('checked')
                },
                success: function(data) {
                    var result = data
                    $('#fromPartsTable').html(result);
                }
            });

我可以使脚本适用于select框，并且在我添加复选框后这些框继续工作，但是没有传递复选框的值。

我感兴趣的是传递'已检查'与'未选中'。

任何帮助将不胜感激。感谢。

Answer 1

您无法选择checkbox，因为不存在此类标记。尝试input或甚至给它一个唯一的id，而不关心标签，例如$('#typeOfSearch')：

function send() {

  $cb = $('input#typeOfSearch');
  console.log($cb.prop('checked'));

  $.ajax({
    url: 'partsTable.php',
    type: 'post',
    dataType: 'html',
    data: {
      major: $('select#dropdownMajor').val(),
      minor: $('select#dropdownMinor').val(),
      typeOfSearch: $cb.prop('checked')
    },
    success: function(data) {
      var result = data
      $('#fromPartsTable').html(result);
    }
  });

}

$('#submit').click(function() {
  send();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="typeOfSearch" value="TRUE">
<label for="typeOfSearch">Exact Search?</label>
<button id="submit">Send</button>

Answer 2

您正在使用无效选择器。请改用input。

您的HTML有input元素，

<input type="checkbox" id="typeOfSearch" value="TRUE">
<label for="typeOfSearch">Exact Search?</label>

function send() {

  $.ajax({
    url: 'partsTable.php',
    type: 'post',
    dataType: 'html',
    data: {
      major: $('select#dropdownMajor').val(),
      minor: $('select#dropdownMinor').val(),
      typeOfSearch: $('input#typeOfSearch').prop('checked')
    },
    success: function(data) {
      var result = data
      $('#fromPartsTable').html(result);
    }
  });

}

$('#submit').click(function() {
  send();
});

Answer 3

您的选择器错误

$('checkbox#typeOfSearch')

您正在寻找：

<checkbox id="typeOfSearch">

如果您只是按ID选择，则可以使用

$('#typeOfSearch')

Answer 4

如果选中该复选框，以下是您可以看到的一些方法。如果选中该复选框，则值为true，否则为false。

if ($('#typeOfSearch:checked').length > 0) {
    /* Do something */
}

if($('#typeOfSearch').prop('checked') == true) {
    /* Do something */
}

if ($('#typeOfSearch').filter(':checked')) {
    /* Do something */
}

希望这有帮助。

Answer 5

希望这会有所帮助：）

＆＃13;

$(document).ready(function() {
    //set initial state.
    $('#typeOfSearch').change(function() {
        $('#typeSelected').html(($(this).is(':checked') ? "TRUE" : "FALSE"));
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="typeOfSearch" /> This Type
<br>
Type Selected:
<span id="typeSelected">FALSE</span>

＆＃13;

Answer 6

在询问Stack Overflow问题时请更好地搜索。这是谷歌在＃34; jquery获得检查或未选中的最佳打击＆＃34;：

https://stackoverflow.com/a/27265333/5129424

您的选择器只会将事件附加到在开头选择的元素。您需要在更改值时确定检查未选中状态：

 $("#countries input:checkbox").change(function() {
                    var ischecked= $(this).is(':checked');
                    if(!ischecked)
                      alert('uncheckd ' + $(this).val());
                });

Working Demo

在.ajax数据

6 个答案: