無法獲取選中的單選按鈕的值

Question

這是HTML：

        <form>
            <div class="form-group">
                <div class="checkbox-detailed male_input">
                    <input type="radio" name="gender" id="male" value="male">
                    <label for="male">
                    <span class="checkbox-detailed-tbl">
                        <span class="checkbox-detailed-cell">
                            <span class="checkbox-detailed-title">Male</span>
                        </span>
                    </span>
                    </label>
                </div>
                <div class="checkbox-detailed female_input" style="margin-left: 25px!important">
                    <input type="radio" name="gender" id="female" value="female">
                    <label for="female">
                    <span class="checkbox-detailed-tbl">
                        <span class="checkbox-detailed-cell">
                            <span class="checkbox-detailed-title">Female</span>
                        </span>
                    </span>
                    </label>
                </div>
            </div>
            <button type="submit" class="btn btn-rounded" id="user_submit">Sign In</button>
        </form>

這是javascript部分：

var user_gender = $("input[name='gender']:checked");
var user_submit = $('#user_submit');

user_submit.click(function(){
    console.log(user_gender.val())
});

我也嘗試了var user_gender = $("input[name=gender]:checked"); （在性別之間沒有引號）和var user_gender = $("input:radio[name='gender']:checked"); ，它仍然無法正常工作。 它記錄的user_gender變量未定義，我做錯了什么嗎？

Answer 1

頁面加載時，您將獲得選中的單選按鈕 。 相反， 單擊按鈕時需要獲取它。

為此，將選擇器移到事件處理程序中：

$('form').submit(function(e) {
  e.preventDefault(); // stop the form submission. Remove once you've finished testing
  var $user_gender = $('input[name="gender"]:checked');
  console.log($user_gender.val())
});

這里需要注意幾件事。 首先，包含jQuery對象的變量的命名約定是像在上面的示例中所做的那樣，以$作為前綴。

其次，在處理表單時，請鈎住form本身的submit事件，而不是submit按鈕的click事件。 這是出於可訪問性的原因。 從語義上講也更好。

Answer 2

您想在函數內移動查詢，如下所示：

var user_submit = $('#user_submit');

user_submit.click(function(){
    var user_gender = $("input[name='gender']:checked");
    console.log(user_gender.val())
});

您正在做的是在提交之前獲取檢查值，這在加載頁面時可能什么都沒有。