单选按钮(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);
});

 

不积跬步，无以至千里。