您的位置：首页 > Web前端 > JavaScript

radio\checkbox\select用js\jq获取选中的值

2017-09-27 21:58 561 查看 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取勾选值</title>
</head>
<body>
<div id="wrap">
<input type="radio" name="payMethod" value="1"/>男
<input type="radio" name="payMethod" value="2"/>女
</div>

<div class="ch-wrap">
<input type="checkbox" name="test" value="0"/>0
<input type="checkbox" name="test" value="1"/>1
<input type="checkbox" name="test" value="2"/>2
<input type="checkbox" name="test" value="3"/>3
<input type="checkbox" name="test" value="4"/>4
<input type="checkbox" name="test" value="5"/>5
<input type="checkbox" name="test" value="6"/>6
<input type="checkbox" name="test" value="7"/>7
<input type="button" onclick="jqChk()" value="提 交checkbox"/>
</div>

<select id="selectDrop" name="">
<option selected value="1">text1</option>
<option value="2">text2</option>
</select>
<input type="button" onclick="selectV()" value="提 交select"/>

<script type="text/javascript" src="../jquery_min/jquery-3.0.0.min.js"></script>
<script>
//radio获取选中的值
var val_payPlatform = $('#wrap input[name="payMethod"]:checked ').val();
$("#wrap input").change(function () {
//    $('input[name="testradio"]:checked').val();
//    $('input:radio:checked').val();
//    $('input[@name="testradio"][checked]');
//    $('input[name="testradio"]').filter(':checked');
var val_payPlatform = $('#wrap input[name="payMethod"]:checked ').val();
console.log(3333, val_payPlatform);
});

//checkbox获取选中的值
function chk() {
var obj = document.getElementsByName('test'); //选择所有name="'test'"的对象，返回数组
//取到对象数组后，我们来循环检测它是不是被选中
var s = '';
for (var i = 0; i < obj.length; i++) {
if (obj[i].checked) s += obj[i].value + ','; //如果选中，将value添加到变量s中
}
//那么现在来检测s的值就知道选中的复选框的值了
console.log(s == '' ? '你还没有选择任何内容！' : s);
}
function jqChk() { //jquery获取复选框值
var chk_value = [];
$('input[name="test"]:checked').each(function () {
chk_value.push($(this).val());
});
console.log(chk_value.length == 0 ? '你还没有选择任何内容！' : chk_value);
}

//select获取值
function selectV() {

//js获取
//    var selectDrop = document.getElementById("selectDrop");
//    var index = selectDrop.selectedIndex;
//    var sv = selectDrop.options[index].value;
//    var st = selectDrop.options[index].text;
//    console.log(999,sv+" "+st);
//jq获取
var selected = $("#selectDrop option:selected");
var sv = selected.val();
var st = selected.text();
console.log(999,sv+" "+st);

}

</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航