表單選擇器 (jQuery 5)

官網連結

※input

目前有15個，先說明下面這10個
:input：HTML元素是input、textarea、select、button
以下9個都是input裡的屬性：

:text：input type是text的
:password：input type是password的
:checkbox：input type是checkbox的
:radio：input type是radio的
:file：input type是file的
:button：input type是button、HTML元素是button的
:image：input type是image，HTML元素是img的不會選中
:reset：input type是reset的
:submit：input type是submit、HTML元素是button的(type是button不會選中)，IE瀏覽器有些版本的button不會選中，官網有寫

※測試

<style>
    .xxx{ background-color: lightgreen; }
</style>
    
    
function input(){
    $(':input').addClass('xxx');
    // $(':input').attr('checked', 'checked');
}
    
function text(){
    $(':text').addClass('xxx');
}
    
function password(){
    $(':password').addClass('xxx');
}
    
function file(){
    $(':file').addClass('xxx');
}
    
function reset(){
    $(':reset').addClass('xxx');
}
    
function submit(){
    $(':submit').addClass('xxx');
}
    
function image(){
    $(':image').addClass('xxx');
}
    
function button(){
    $(':button').addClass('xxx');
}
    
function checkbox(){
    $(':checkbox').attr('checked', 'checked');
}
    
function radio(){
    $(':radio').addClass('xxx');
}
    
function hid(){
    alert($(':input').length);
}
----------
<form>
    <input type="text" value="t" />text<br />
    <input type="password" value="p" />password<br />
    <input type="file" />file<br />
    <textarea>textarea</textarea>textarea<br />
    <input type="hidden" value="h" />hidden<br />
    <input type="reset" value="重置" />reset<br />
    <input type="submit" value="送交" />submit<br />
    
    <input type="image" />image1<br />
    <img alt="" src="">image2<br />
    
    <input type="button" value="b1" />button1<br />
    <button value="b2">Button2</button>button2<br />
    
    <input type="checkbox" name="alphabeta" value="A" />a
    <input type="checkbox" name="alphabeta" value="B" />b
    <input type="checkbox" name="alphabeta" value="C" />c<br />
    
    <input type="radio" name="digit" value="1" />one
    <input type="radio" name="digit" value="2" />two
    <input type="radio" name="digit" value="3" />three<br />
    
    <select>
        <option value="o1">Option1</option>
        <option value="o2">Option2</option>
        <option value="o3">Option3</option>
    </select><br />
</form>
<br />
<br />
<button onclick="input()">測input</button>
<button onclick="text()">測text</button>
<button onclick="password()">測password</button>
    
<button onclick="file()">測file</button>
<button onclick="reset()">測reset</button>
<button onclick="submit()">測submit</button>
    
<button onclick="image()">測image</button>
<button onclick="button()">測button</button>
<button onclick="checkbox()">測checkbox</button>
<button onclick="radio()">測radio</button>
<button onclick="hid()">測hidden</button>

※由於:input對checkbox看不出效果，所以我在input函數有註解一行，打開後，連radio也會勾選，很正常，只是要測:input對checkbox是有效的而已
有些jQuery的版本要將attr替換成prop

※使用:input時hidden也抓的到，按下測:input按鈕時，只有一個img沒抓到，算一算有27個，而按下測hidden的按鈕時，有28個
或者多刪一些不必要的來測就知道了

※我本來hid()是寫hidden()，發現沒有作用，它也不是關鍵字或保留字，但就是沒用

※狀態

:checked：判斷checkbox、radio用的勾選
:selected：判斷select option用的勾選
:disabled：判斷是disabled
:enabled：判斷不是disabled
:focus：判斷是否聚焦(游標進去的狀態)

※:enabled／:disabled

$(function() {
    $(":enabled").css('color', 'green');
    $(":disabled").css('color', 'red');
});
----------
<input type="text" value="a" />text<br />
<input type="text" value="b" disabled="disabled" />disabled<br />
<input type="text" value="c" readonly="readonly" />readonly<br />

※結果b是紅色，其他都是綠色

※:checked

$(function() {
    $("[name='digit']:checked").css('background-color', 'red');
    alert($("[name='alphabeta']:checked").length);
});
----------
<input type="checkbox" name="alphabeta" value="A" checked="checked" />a
<input type="checkbox" name="alphabeta" value="B" checked />b
<input type="checkbox" name="alphabeta" value="C" checked=true />c
<input type="checkbox" name="alphabeta" value="D" checked="true" />d
<input type="checkbox" name="alphabeta" value="E" />e<br />
    
<input type="radio" name="digit" value="1" />one
<input type="radio" name="digit" value="2" checked="checked" />two
<input type="radio" name="digit" value="3" />three<br />

※checked有四種寫法，最好的就是checked='checked'，其他的有可能瀏覽器不支援

※:selected單選

$(function() {
    alert($("option:selected").length);
});
----------
<select>
    <option>Option1</option>
    <option selected="selected">Option2</option>
    <option>Option3</option>
</select>

※:selected多選

function test(){
    $('option:selected').each(function(){
        alert($(this).val());
    });
}
----------
<select multiple="multiple">
    <option value="o1">Option1</option>
    <option value="o2" selected="selected">Option2</option>
    <option value="o3">Option3</option>
    <option value="o4">Option4</option>
    <option value="o5">Option5</option>
</select>
<button onclick="test()">測試</button>

※要按右Ctrl鍵不放，再按滑鼠左鍵

※:focus

$(function() {
    $('*').focus(function(){
        test();
    });
});
    
function test(){
    if($(':checkbox').is(':focus')){
        alert('a');
    } else if($(':radio').is(':focus')){
        alert('b');
    } else if($(':text').is(':focus')){
        alert('c');
    } else if($('#tt').is(':focus')){
        alert('d');
    }
}
----------
<input type="checkbox" />
<input type="checkbox" />
<input type="radio" />
<input type="radio" />
<input type="text" value="text" />
<textarea id="tt">textarea</textarea>

※option用這一招沒用，因為滑鼠游標進不去，或者用disabled也是點不進去，但readonly是可以的

※官網那一招進的去，還蠻厲害的，可自行參考