Jquery中prop方法获取属性的值-CSDN博客

本文链接：https://blog.csdn.net/qq_36186768/article/details/102749099

Jquery中prop方法获取属性的使用

今天在写django前端页面的时候遇到了逻辑上的问题，通过百度get到了这个知识点，前来分享

先来参考官方详解:

定义和用法
prop() 方法设置或返回被选元素的属性和值。

当该方法用于返回属性值时，则返回第一个匹配元素的值。

当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。

语法
返回属性的值：

$(selector).prop(property)
设置属性和值：

$(selector).prop(property,value)
使用函数设置属性和值：

$(selector).prop(property,function(index,currentvalue))
设置多个属性和值：

$(selector).prop({property:value, property:value,…})

可见，prop方法还是很强大的。这里我针对我的问题，主要介绍一下prop方法获取值处有坑地方，给大家举个例子。

这里，我放上了一个前端页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.4.1.min.js"></script>

    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>


</head>
<body>

 <input type="radio" name="ctype" id="fc1" value="1" class="with-gap" checked >
 <input type="radio" name="ctype" id="fc2" value="1" class="with-gap" >
 <input type="radio" name="ctype" id="f3" value="1" class="with-gap" >
 
<script>
 	a = $('input[name="ctype"]').prop("checked")
    console.log(a)
</script>
</body>
</html>

通过，在浏览器的控制台中的打印结果为true.

第二次，我改变了前端页面:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.4.1.min.js"></script>

    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>


</head>
<body>

 <input type="radio" name="ctype" id="fc1" value="1" class="with-gap"  >
 <input type="radio" name="ctype" id="fc2" value="1" class="with-gap" checked >
 <input type="radio" name="ctype" id="f3" value="1" class="with-gap" >
 
<script>
 	a = $('input[name="ctype"]').prop("checked")
    console.log(a)
</script>
</body>
</html>