iT邦幫忙

0

[已解決]JQuery checkbox 選擇器問題

  • 分享至 

  • xImage

我目前有一個checkbox的群組 然後name是一樣的 只有val去區分checkbox的欄位

<input type="checkbox" name="basicInfo[]" value="sex">
<input type="checkbox" name="basicInfo[]" value="phone">
<input type="checkbox" name="basicInfo[]" value="perID">
<input type="checkbox" name="basicInfo[]" value="brithday">
<input type="checkbox" name="basicInfo[]" value="email">
<input type="checkbox" name="basicInfo[]" value="jobID">

如果我要一開始就幫使用者先勾選性別跟電話
就是要找value=sex 跟 phone的先勾選

那jquery選擇器要如何選取

$().prop('checked', true);

14:45 更新

    var defArr = ['sex', 'phone']
    $('[name="basicInfo[]"]').each(function(){
        if($.inArray($(this).val(), defArr) > -1){
            $(this).prop('checked', true);
        }
    });

不知道有沒有其他更好的方法 目前只有想到這個 可以去處理

$('input[type="checkbox"][name="basicInfo[]"][value="sex"], input[type="checkbox"][name="basicInfo[]"][value="phone"]').prop('checked', true);
怕太長 就把 [type="checkbox"] 拿掉
柯柯 iT邦新手 2 級 ‧ 2020-12-10 14:48:29 檢舉
感謝 原來選擇器還可以這樣給元素去找
再多教一招好了。
我會用

[name^="basicInfo"]

這樣的方式來對應元素前置名。
不過這是單純看[]礙眼。

這得確保你沒有用 basicInfo 開頭的命名才行。

另外如果真的覺得名字元素太長。
其實有時可以自定義屬性名來處理。


<input type="checkbox" name="basicInfo[]" data-check="Info" value="jobID">

這樣就可以用
$('input[data-check="Info"][value="sex"]) 來找了。

映像中好像有可以多重值的寫法。不過jquery已經很久沒用了,懶得去查了。
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
1
qpalzm
iT邦研究生 5 級 ‧ 2020-12-10 14:26:22

利用input name選擇去選擇就可以囉~

$("input[name='basicInfo[]']").prop('checked',true);
看更多先前的回應...收起先前的回應...
柯柯 iT邦新手 2 級 ‧ 2020-12-10 14:29:31 檢舉

因為是作群組的概念 所以name整個群組都會一樣
所以沒辦法個別去用程式勾選
加[]是要回傳給後端作陣列用

qpalzm iT邦研究生 5 級 ‧ 2020-12-10 14:33:34 檢舉
 let  cbxVehicle=[];
            $("input[name=basicInfo]").prop('checked',true);
            $("input:checkbox:checked[name=basicInfo]").each(function (i) {
                cbxVehicle[i]=$(this).val();
                console.log(cbxVehicle);

            });

不用加也可以達到你要的陣列效果,jq可以判斷勾選的checkbox 有哪些,再自行加入陣列也是一樣的意思喔~

柯柯 iT邦新手 2 級 ‧ 2020-12-10 14:50:23 檢舉

習慣陣列會給[]去辨別這是陣列元素

$('input:checkbox:checked[name="basicInfo[]"]').map(function(){return $(this).val();}).get();

我組的方式是這樣 XD 去跑有勾選的map 組起來回傳給PHP去做成陣列

qpalzm iT邦研究生 5 級 ‧ 2020-12-10 15:12:01 檢舉

迴圈的習慣就看個人囉xd/images/emoticon/emoticon12.gif

kekeke
這邊最好不要隨便教。
使用[]算是正規的from用法沒錯。
要不然會沒辦法傳送正常值的。

qpalzm iT邦研究生 5 級 ‧ 2020-12-10 16:53:47 檢舉

浩瀚星空 謝謝提醒我稍微修正我的意思不是說不行加~表達錯誤謝謝~/images/emoticon/emoticon41.gif

沒事,主要是怕你也誤會了。
雖然現在用jquery在沒有[]的情況下,也是可以取到正常的物件對應也沒錯。
但最好還是忠於原味。免得被誤會。
我比較常用的手法是不用 name 還個屬性名。
改用 data-name 這個屬性名,這樣我在data-name中就不需要用[]處理了。
這樣就可以跟from用法區分開來。也比較不容易被後來的人誤會。

qpalzm iT邦研究生 5 級 ‧ 2020-12-10 17:01:28 檢舉

浩瀚星空好的,ps:來留言,還能上一課~划算謝謝/images/emoticon/emoticon07.gif

2
allenlwh
iT邦高手 1 級 ‧ 2020-12-10 14:48:41
$("input[name='basicInfo[]']").each(function() {
    if ($(this).val() =="sex") {
        $(this).prop("checked", true); 
    }
});
3
froce
iT邦大師 1 級 ‧ 2020-12-10 15:25:14
<input type="checkbox" name="basicInfo[]" value="sex" checked>
<input type="checkbox" name="basicInfo[]" value="phone" checked>
<input type="checkbox" name="basicInfo[]" value="perID">
<input type="checkbox" name="basicInfo[]" value="brithday">
<input type="checkbox" name="basicInfo[]" value="email">
<input type="checkbox" name="basicInfo[]" value="jobID">

這樣不好嗎?科科

Homura iT邦高手 1 級 ‧ 2020-12-10 15:37:01 檢舉

可以XD

柯柯 iT邦新手 2 級 ‧ 2020-12-10 19:03:25 檢舉

可以XDDD
只是因為這些是SQL欄位 所以用PHP去把checkbox 跑出來
會變成要一直判斷欄位的name 去給checked
所以就想說用jquery跑比較快

我要發表回答

立即登入回答