выберите флажок с ключом ввода

У меня есть несколько флажков, которые мне нужно выбрать с помощью клавиши ввода вместо пробела, когда у него есть фокус. У меня есть код ниже, который работает для одного флажка, но мне нужно несколько флажков. Я знаю, что тег 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 идентификатором.

Вот мой полный код до сих пор:

<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. Вы обновляете текстовое поле при щелчке по галочке. Лучше использовать событие 'change', подобное этому' $ ('. Taglist input'). Change (updateTextArea); '. Затем запускайте событие изменения сразу после программной проверки окна, вызывая '$ (this) .change();'. –

Фантастический, который отлично работает. Я ценю все время с этим. Огромное спасибо!!!! – Greg

Похоже, вы пытаетесь получить эту работу все флажки? В этом случае используйте $(":checkbox") вместо $('#mycheckbox')

источник

2017-02-17 21:40:43 Blakethepatton

Это получилось. Большое спасибо. Вы, ребята, так быстро !!!! Спасибо за вашу помощь. – Greg

Это получилось. Большое спасибо. Вы, ребята, так быстро !!!! Спасибо за вашу помощь. Однако у меня есть проблема. Я использую этот флажок, чтобы отправить его значение в текстовое поле. Если я нажимаю на мышь, она отлично работает. Клавиша ввода теперь выбирает флажок, но значение не передается в текстовое поле. – 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')); 
    } 
});

Другой метод является использование типа selector для того, чтобы получить input элементов с определенным типом.

$('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, пожалуйста, объясните причину. –

Я не нисходящий, но почему вы создаете класс, когда у нас есть доступ к селектору псевдокласса ': 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

Или вы можете использовать класс селектор вместо селекторе. Просто добавьте некоторый класс в свой флажок.

источник

2017-02-17 21:41:21 Janne

Вы можете использовать input[type="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" 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

ответ

Смежные вопросы