iT邦幫忙

0

js checkbox判斷條件問題

如果我想要判斷這4格checkbox是否勾選,該怎麼下判斷式?
js寫法~

<input name="RQ_ck01" type="checkbox" value="1" />
<input name="RQ_ck01" type="checkbox" value="2" />
<input name="RQ_ck01" type="checkbox" value="3" />
<input name="RQ_ck01" type="checkbox" value="4" />
/
/
神明表示,跨摩
tzuyiyang iT邦新手 5 級 ‧ 2020-11-06 08:04:15 檢舉
沒有複製到程式碼 :(
0
japhenchen
iT邦大師 1 級 ‧ 2020-11-06 08:09:43
var getchecked = function(){
	var array = []
	var checkboxes = document.querySelectorAll('input[type=checkbox]:checked')

	for (var i = 0; i < checkboxes.length; i++) {
        array.push(checkboxes[i].value);
        console.log(checkboxes[i].value);
	}

}
看更多先前的回應...收起先前的回應...
tzuyiyang iT邦新手 5 級 ‧ 2020-11-06 08:40:31 檢舉

document.MISRQ.RQ_ck01('input[type=checkbox]:checked')
這裡會出現錯誤

tzuyiyang iT邦新手 5 級 ‧ 2020-11-06 08:45:42 檢舉

她錯誤訊息是抓不到這個函數

document.MISRQ.RQ_ck01('input[type=checkbox]:checked')

不是這樣寫啦!

document.querySelectorAll 這是js的函數,你的MISRQ應該沒提供這個prototype .. (猜)

tzuyiyang iT邦新手 5 級 ‧ 2020-11-06 09:41:20 檢舉

我照著你的方式寫 可是alert會在一開始進表單就跳出

tzuyiyang iT邦新手 5 級 ‧ 2020-11-06 09:51:37 檢舉

我再試試看~感謝您

我放這裡讓你去測試,我多一個button測試給你看,注意右下角console視窗
https://jsfiddle.net/japhenchen/gytbsoc3/1/

0
allenlwh
iT邦好手 1 級 ‧ 2020-11-06 09:04:49
var chkbox="";
$("input[name=RQ_ck01]:checked").each(function(i){
    if(chkbox=="")
    {
        chkbox=$(this).val();
    }
    else
    {
        chkbox+= "," + $(this).val();
    }
});

if(chkbox=="")
{
    alert("此項目未勾選!");
}
tzuyiyang iT邦新手 5 級 ‧ 2020-11-06 09:30:24 檢舉

找不到$

tzuyiyang iT邦新手 5 級 ‧ 2020-11-06 09:51:57 檢舉

我在嘗試看看謝謝~

2
通靈亡
iT邦研究生 3 級 ‧ 2020-11-06 09:40:51

https://jsfiddle.net/s3ovmd8a/

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<script>
    window.onload = function () {
        document.getElementById('result_btn').onclick = function () {
            let checkboxes = document.querySelectorAll('input[name=RQ_ck01]')

            for (let checkbox of checkboxes) {
                let label = document.querySelector(`label[for=${checkbox.id}]`).innerHTML
                console.log(label, checkbox.value, checkbox.checked)
            }
        };
    };
</script>

<body>
    <div>
        <input name="RQ_ck01" id="RQ_ck01_01" type="checkbox" value="1" /> 
        <label for="RQ_ck01_01">方塊1</label>
    </div>
    <div>
        <input name="RQ_ck01" id="RQ_ck01_02" type="checkbox" value="2" /> 
        <label for="RQ_ck01_02">方塊2</label>
    </div>
    <div>
        <input name="RQ_ck01" id="RQ_ck01_03" type="checkbox" value="3" /> 
        <label for="RQ_ck01_03">方塊3</label>
    </div>
    <div>
        <input name="RQ_ck01" id="RQ_ck01_04" type="checkbox" value="4" /> 
        <label for="RQ_ck01_04">方塊4</label>
    </div>
    <button id="result_btn">確認結果</button>
</body>
</html>

呵~~~直接給完整的解答了。好吧。
他再有問題我就認了。

tzuyiyang iT邦新手 5 級 ‧ 2020-11-06 09:52:48 檢舉

謝謝你,收獲很多3Q

通靈亡 iT邦研究生 3 級 ‧ 2020-11-06 10:00:00 檢舉

浩瀚星空
我從他的提問的方式,感覺是一個完全沒方向的新手
所以直接給他Sample Code讓他自己完整思考和研究一次
他是不是單純抄過去沒理解,之後他提問類似問題的時候就看的出來

tzuyiyang
之後提問的時候建議提供你目前「完成的程式碼」、「對應的輸出結果」與「錯誤訊息」

0
浩瀚星空
iT邦超人 1 級 ‧ 2020-11-06 09:41:27

你也不po你自已的程式碥。
然後已經有兩個給你現成的。
一個是原生js。一個是jquery。

你問都不問,研究都不研究的,就直接說問題。

沒$就是你沒載入jquery。
如果沒用jquery的話。

就先照著 japhenchen 給你的原生寫法。
要不然就是將你的程式碼po上來。

不需要大家猜半天你的問題。

tzuyiyang iT邦新手 5 級 ‧ 2020-11-06 09:51:19 檢舉

謝謝你,我剛接觸這塊,很多不懂,謝謝提醒~

0
純真的人
iT邦高手 1 級 ‧ 2020-11-06 10:22:46

我的寫法~你也是可以看看~

<input name="RQ_ck01" type="checkbox" value="1" />
<input name="RQ_ck01" type="checkbox" value="2" />
<input name="RQ_ck01" type="checkbox" value="3" />
<input name="RQ_ck01" type="checkbox" value="4" />
<input name="show" type="button" value="確認" onclick="ShowFun()" />
<script type="text/javascript">
    function ShowFun() {
        var RQ_ck01 = document.getElementsByName("RQ_ck01");
        var RQ_yn = 1;
        for (var i = 0; i < RQ_ck01.length; i++) {
            if (!RQ_ck01[i].checked) {
                RQ_yn = 0; ;
            }
        }
        if (RQ_yn == 1) {
            alert("已全勾選");
        } else {
            alert("沒有全勾選");
        }
    }

</script>
2
froce
iT邦大師 1 級 ‧ 2020-11-06 12:15:24
let checked = document.querySelector('[name=RQ_ck01]:checked')
if (checked) {
    console.log("有選取")
} else {
    console.log("未選取")
}

怎麼大家的回答都要迴圈啊?明明不需要啊。不是只要檢查是否勾選,有勾選就算有了吧?
附上如果要檢查每一個的code,IE11應該可以用。

var checkedBoxes = [].slice.call(document.querySelectorAll('[name=RQ_ck01]:checked'))
checkedBoxes.forEach(function(box) {console.log(box.value)})

喔~這寫法不錯呀~不用迴圈的判斷~

我要發表回答

立即登入回答