Question

我正在尝试运行以下功能：

var getFavorite = function(){
var favCheck = document.querySelector("#fav");
var status;

if(favCheck.checked){
    status = "Yes!";
}else{
    status = "No";
}
return status;
};

html表单包含以下内容：

<form action="#" id="flavorForm">
    <ul id="errors"></ul>

    <div data-role="fieldcontain">
      <label for="drug">Flavor: </label>
        <input type="text" name="flavor" id="flavor" class="required" />
    </div>  
    <div data-role="fieldcontain">
        <label for="favorite">Favorite?</label>
        <input type="checkbox" id="favorite" value="Yes" class="checkbox" />

    </div>
    <div data-role="fieldcontain">
        <label for="notes">Notes: </label>
        <textarea name="notes" id="notes"></textarea>
    </div>  
        <input type="submit" value="Save Flavor" id="submitFlavor" data-theme="b" />

</form>

favCheck的值应该来自表单的第二个...块。但是每当我在表单上输入一个值时，我都会收到'TypeError：favCheck为null'，无论我是否勾选复选框。我正在使用jQuery来检索值。任何建议表示赞赏。感谢。

Answer 1

你拼错了id名字。请使用#favorite代替#fav

试试这个，

var getFavorite = function(){
var favCheck = document.querySelector("#favorite");
var status;

if(favCheck.checked){
    status = "Yes!";
}else{
    status = "No";
}
return status;
};

DEMO

Answer 2

HTML

<input type="checkbox" id="checkme" checked="checked" />

jQuery


$('#checkme').change(function () {
    var checkbox = $('#checkme').prop('checked');
    if (checkbox) {
        alert('checkbox is checked');
    } else {
        alert('checkbox is not checked');
    }
});


http://jsfiddle.net/rjE8P/

Answer 3

因为你使用的是ID而不是类

favcheck = document.getElementById('fav');

此外，您需要实际使用该ID fav而不是favorite。

Answer 4

$('#favorite').change(function(){
  var status;
  if($(this).is(':checked')) {
     status = 'Yes';
  }
  else{
     status = "No";
  }
  alert(status);
});

无法从表单获取Checkbox的状态

4 个答案:

DEMO