input checkbox類型取消選擇問題

javascript jquery

sinceremei 2019-01-16 13:44:56 ‧ 10527 瀏覽

分享至

我有一個簡單但我卻不會的小問題

<input type="checkbox" id="NameCheckbox">
<label for="NameCheckbox">Name:</label>
<input type="text" id="inputName" style="width: 350px;">

上面寫了一個checkbox的表單

if(document.getElementById('NameCheckbox').checked){
    var name = $("#inputName").val();
}
init(name);

然後做了上面的判斷，等資料送出後Id inputName的執會被我歸零(如下)

if(document.getElementById('NameCheckbox').checked){
    $("#inputName").val("");
}

但我不知道要怎麼利用javascript or jquery讓checkbox取消勾選，有人能幫我解答嗎?

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

耿直小伙

iT邦新手 1 級 ‧ 2019-01-16 14:01:19

最佳解答

jquery這樣用就可以。

$('#NameCheckbox').prop('checked', false);

// 這樣也可以判斷有沒有選取
var isCheck = $('#NameCheckbox').prop('checked');

回應
分享
檢舉

登入發表回應

allenlwh

iT邦高手 1 級 ‧ 2019-01-16 14:08:27

$("input[id=NameCheckbox]").prop("checked", false);

回應 6
分享
檢舉

看更多先前的回應...收起先前的回應...

allenlwh iT邦高手 1 級 ‧ 2019-01-16 14:11:21 檢舉

若有多個相同的Checkbox id，也可使用以下方式，一次全部取消勾選

$("input[id=NameCheckbox]").each(function() {
         $(this).prop("checked", false);
     });

sinceremei iT邦新手 5 級 ‧ 2019-01-16 15:09:03 檢舉

可是如果Id都不同就要用

$('#NameCheckbox').prop('checked', false);

的方式一行一行判斷，無法一次取消對吧??

allenlwh iT邦高手 1 級 ‧ 2019-01-16 15:30:16 檢舉

如果Id有規則性的話，還是可以一次處理.

<input id="CheckboxName1" type="checkbox" value="1"> 1
<input id="CheckboxName2" type="checkbox" value="2"> 2
<input id="CheckboxName3" type="checkbox" value="3"> 3
<input id="CheckboxName4" type="checkbox" value="4"> 4
<input id="CheckboxName5" type="checkbox" value="5"> 5

$("input[id^=CheckboxName]").each(function() {
         $(this).prop("checked", false);
     });

耿直小伙 iT邦新手 1 級 ‧ 2019-01-16 15:34:01 檢舉

可以用範圍限制去取這些checkbox，例如：

<div class="block">
    <input id="CheckboxName1" type="checkbox" value="1">
    <input id="CheckboxName2" type="checkbox" value="2">
    <input id="CheckboxName3" type="checkbox" value="3">
    <input id="CheckboxName4" type="checkbox" value="4">
    <input id="CheckboxName5" type="checkbox" value="5">
</div>

<script>
    $(document).ready(function(e) {
        $('input[type="checkbox"]', '.block').each(function(i, v) {
            $(v).prop('checked', false);
        });
    });
</script>