jQuery 之 checkbox|radio|select 操作

  1. checkbox
  2. radio
  3. select

jQuery1.6 中添加了 prop 方法,看起来和用起来都和 attr 方法一样,但是在一些特殊情况下,attribute 和 properties 的区别非常大,在 jQuery1.6 之前,.attr () 方法在获取一些 attributes 的时候使用了 property 值,这样会导致一些不一致的行为。在 jQuery1.6 中,.prop () 方法提供了一中明确的获取 property 值得方式,这样.attr () 方法仅返回 attributes。 – 摘自 jQuery API 文档

checkbox

<input type='checkbox' value='1'/>
<input type='checkbox' value='2'/>
<input type='checkbox' value='3'/>
$("input [type=checkbox]")                    // 获取所有的 checkbox
$("input [type=checkbox]:checked")            // 获取所有的被选中的 checkbox
$("input [type=checkbox]:not (:checked)")      // 获取所有未被选中的 checkbox
$("input [type=checkbox]").not (":checked")    // 获取所有未被选中的 checkbox

$("input [type=checkbox]:first")              // 获取第一个 checkbox 的 value 值

$("input [type=checkbox]:checked").length     // 获取被选中 checkbox 的数量

$("input [type=checkbox]:first").prop ("checked")               // 判断第一个 checkbox 是否被选中
$("input [type=checkbox]:first").prop ("checkbox",true)         // 选中第一个 checkbox

$("input [type=checkbox]:not (:checked)").prop ("checked",true) // 全选
$("input [type=checkbox]:checkbox").prop ("checked",false)     // 都不选中

// 反选
$("input [type=checkbox]").each (function ()&#123;
    if ($(this).prop ("checked"))&#123;
        $(this).prop ("checked",false);
    &#125;else&#123;
        $(this).prop ("checked",true);
    &#125;
&#125;)

radio

<input type='radio' name='rank' value='1' />
<input type='radio' name='rank' value='2' />
<input type='radio' name='rank' value='3' />
$("input [type=radio]")                 // 获取所有的 radio
$("input [type=radio]:checked")         // 获取被选中的 radio
$("input [type=radio]:not (:checkbox)")  // 获取所有没有被选中的 radio

$("input [type=radio]:checked").val ()   // 获取被选中的 radio 的 value 值

$("input [type=radio]:first").prop ("checked")       // 判断第一个 radio 是否被选中
$("input [type=radio]:first").prop ("checked",true)  // 选中第一个 radio

select

<select>
    <option value='1'>1</option>
    <option value='2'>2</option>
    <option value='4'>3</option>
</select>
$("select option:selected")        // 获取被选中的 option
$("select").val ()                  // 获取选中 option 的 value 值
$("select option:selected").text () // 获取被选中的 option 的 text 值

$("select option:first").prop ("selected")           // 判断第一个 option 是否被选中
$("select option:first").prop ("selected",true)      // 选中第一个 option
$("select option:selected").prop ("selected",false)  // 取消当前选中,然后默认选中第一个

转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以邮件至 jaytp@qq.com

×

喜欢就点赞,疼爱就打赏