單選按鈕(radio)的取值和點擊事件

筆記走一波:獲取單選按鈕(radio)的選中值，以及它的點擊事件的實現

首先要引入Jquery

<script type="text/javascript" src="js/jquery-3.1.1.min.js">

下面是一個簡單的表單

<!-- 單選按鈕的取值和點擊事件-->
<form action="#" method="post">
    性別：
    <input type="radio" name="sex" value="male" checked="true" />男
    <input type="radio" name="sex" value="female" />女

    <input type="button" id="getSexBtn" value="獲取性別" />
</form>

就這么丑啊！就這么丑！

 

需求一：點擊“獲取性別”按鈕，使用alert()彈出選中按鈕的value值

// 通過type="radio"獲取選中的值
$("#getSexBtn").click(function(){
    var sex = $("input[type=radio]:checked").val();
    alert(sex);
});

// 通過name="sex"獲取選中的值
$("#getSexBtn").click(function(){
        var sex = $("input[name=sex]:checked").val();
        alert(sex);
});

 

需求二：選中“男”或者“女”時，彈出選中的按鈕的value值，即按鈕的點擊事件

// 點擊單選按鈕后觸發，即，我們選擇“男”時，觸發一個事件，彈出選中的值
$("input[name=sex]").click(function(){
    var sex = $(this).val();
    alert(sex);
});

 

不積跬步，無以至千里。