使用輸入鍵選擇複選框

我有幾個複選框，需要使用回車鍵而不是空格鍵進行選擇。我有下面的代碼適用於一個複選框，但我需要多個複選框。我知道ID標籤需要是唯一的，但我不知道如何去做。使用輸入鍵選擇複選框

$(document).ready(function() { 
    $('#mycheckbox').on('keypress', function (event) { 
     if (event.which === 13) { 
      this.checked = !this.checked; 
     } 
    }); 
}); 

<input type="checkbox" name="Colors" value="Bike" id="mycheckbox">My text<br>

我試圖讓這個工作在所有的複選框，而不僅僅是與mycheckbox id。

這裏是我完整的代碼至今：

<html> 
<head> 
<script type="text/javascript" src="http://code.jquery.com/jquery- 

latest.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $('input:checkbox').on('keypress', function (event) { 
     if (event.which === 13) { 
      $(this).prop('checked', !$(this).prop('checked')); 
     } 
    }); 
}); 
</script> 

</head> 
<body> 

<script 

src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></ 

script> 
<textarea class="textfield" id="form1" name="form1">My text 

here</textarea> 
<div class="taglist"> 
    <label><input type="checkbox" value="Value 1">Value 1</label> 
    <label><input type="checkbox" value="Value 2">Value 2</label> 
    <label><input type="checkbox" value="Value 3">Value 3</label> 
    <label><input type="checkbox" value="Value 4">Value 4</label> 
    <label><input type="checkbox" value="Value 5">Value 5</label> 
</div> 
<script type="text/javascript"> 
function updateTextArea() { 
    var allVals = $('#form1').data('initialVal'), 
     lineCount = 1; 
    $('.taglist :checked').each(function(i) { 
    allVals+= (i != 0 || allVals.length > 0 ? "\r\n" : "") + $(this).val 

(); 
    lineCount++; 
    }); 
    $('#form1').val(allVals).attr('rows', lineCount); 

} 
$(function() { 
    $('.taglist input').click(updateTextArea); 

    $('#form1').data('initialVal', $('#form1').val()); 
    updateTextArea(); 
}); 
</script> 

</body> 
</html>

來源

2017-02-17 Greg

請張貼您正在使用的HTML。 –

@Greg - 當單擊複選框時，您正在更新textarea。更好地使用'change'事件，就像這樣'$（'。taglist input'）。change（updateTextArea）;'。然後通過調用'$（this）.change（）;'以編程方式檢查一個框，然後觸發change事件。 –

神奇的，偉大的工程。我非常感謝大家的時間。非常感謝！！！！ – Greg

聽起來像你試圖讓這個對所有複選框工作？在這種情況下，請使用$(":checkbox")而不是$('#mycheckbox')

來源

2017-02-17 21:40:43 Blakethepatton

明白了。非常感謝你。你們很快！感謝大家的幫助。 – Greg

明白了。非常感謝你。你們很快！感謝大家的幫助。我確實有一個問題。我使用複選框將其值發送到textarea。如果我點擊鼠標它效果很好。回車鍵現在選中複選框，但該值沒有傳遞給textarea。 – Greg

值爲「checked」的值或複選框的名稱？ – Blakethepatton

您必須改用classes。

<input type="checkbox" name="Colors" value="Bike" class="mycheckbox">My text<br>

Jquery的

$('.mycheckbox').on('keypress', function (event) { 
    if (event.which === 13) { 
     $(this).prop('checked', !$(this).prop('checked')); 
    } 
});

的另一種方法是爲了得到input元件與某些類型使用類型selector。

$('input[type=checkbox]')

$(':checkbox').on('keypress', function (event) { 
 
    if (event.which === 13) { 
 
     $(this).prop('checked', !$(this).prop('checked')); 
 
     $('textarea').html($(this).prop('checked').toString()); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" name="Colors" value="Bike" class="mycheckbox">My text<br> 
 
<textarea></textarea>

來源

2017-02-17 21:41:09

@Downvoter，請解釋你的理由 –

我不是downvoter，但爲什麼當我們訪問'：checkbox'的僞類選擇器時創建一個類？ – Blakethepatton

$(document).on('keypress', function(event) { 
 
    if (event.keyCode == 13) { 
 
    $('#mycheckbox').prop('checked', true); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" name="Colors" value="Bike" id="mycheckbox">

來源

2017-02-17 21:41:12

或者你可以使用類選擇，而不是id選擇。只需添加一些類到您的複選框。

來源

2017-02-17 21:41:21 Janne

您可以使用input[type="checkbox"]或添加一個類每一個複選框，並肯定的ID必須是唯一的：

$(document).ready(function() { 
 
    $('input[type="checkbox"]').on('keypress', function(event) { 
 
    if (event.which === 13) { 
 
     this.checked = !this.checked; 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" name="Colors" value="Bike" id="mycheckbox1">My text<br> 
 
<input type="checkbox" name="Colors" value="Bike" id="mycheckbox2">My text<br> 
 
<input type="checkbox" name="Colors" value="Bike" id="mycheckbox3">My text<br> 
 
<input type="checkbox" name="Colors" value="Bike" id="mycheckbox4">My text

來源

2017-02-17 21:41:22 Ionut

使用attribute-equal selector得到checkbox類型的輸入是這樣的：

$(document).ready(function() { 
 
    $('input[type = "checkbox"]').on('keypress', function(event) { 
 
    if (event.which === 13) { 
 
     this.checked = !this.checked; 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" name="Colors" value="Bike">My text<br> 
 
<input type="checkbox" name="Colors" value="Bike">Other text<br>

來源

2017-02-17 21:41:30

更改選擇應該做的伎倆：

$('input[type=checkbox]')

這將返回類型複選框的所有輸入。另一種方法是給所有您感興趣的複選框，然後匹配課程 - 我也提出了這種方法，以防您不希望將其應用於所有課程。所以HTML：

<input type="checkbox" class="support-enter" />

然後jQuery選擇：

$('.support-enter')

來源

2017-02-17 21:41:43

使用輸入鍵選擇複選框

回答

相關問題