Попытка установить переключатель, установленный при нажатии на текстовое поле. Есть метка для переключателя, а внутри метки есть текстовое поле, поэтому мне нужно, чтобы при нажатии на текстовое поле для записи вход был проверен.
<input type = "radio" name = "msg_form" id = "invite0" value = "0" <? if ($msg_form == 0) { echo 'checked'; } ?>>
<label for = "invite0">
<textarea class = "selfmessage" for = "invite0" oninput = "replaceName(this)" style = "height: auto !important;" name = "self_invite" type = "text" placeholder = "write something..."></textarea>
</label>
@NirajKaushal, который здесь не работает, поскольку сам textarea
является интерактивным элементом.
Вы можете добиться этого, используя parent()
, чтобы получить label
, обертывающий textarea
, затем prev()
, чтобы получить ввод, и prop()
, чтобы установить его на checked
:
$('.selfmessage').on({
'focus': function() {
$(this).parent().prev(':radio').prop('checked', true);
},
'input': replaceName
});
function replaceName() {
// your logic here...
}
.selfmessage {
height: auto;
}
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type = "radio" name = "msg_form" id = "invite0" value = "0">
<label>
<textarea class = "selfmessage" name = "self_invite" type = "text" placeholder = "write something..."></textarea>
</label>
Обратите внимание, что функциональные возможности label
здесь в значительной степени полностью избыточны, учитывая ваш пример кода. Я оставил это только на тот случай, если от этого зависит ваш стиль пользовательского интерфейса. Если нет, я предлагаю удалить его.
Также обратите внимание, что я удалил атрибут события oninput
и изменил его на ненавязчивый обработчик, а также изменил встроенный стиль на внешний CSS. По возможности всегда следует избегать встроенных JS и CSS.
Вы можете использовать keyup
, или input
, или change
, или focus
, или что угодно в качестве триггера. вот список часто используемых триггеров
$('.selfmessage').on('focus', function(e) {
$('#invite0').prop('checked', true);
});
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type = "radio" name = "msg_form" id = "invite0" value = "0"><label for = "invite0">
<textarea class = "selfmessage" for = "invite0" style = "height: auto !important;" name = "self_invite" type = "text" placeholder = "write something..."></textarea>
</label>
В вашем описании указаны различные события, которые использует ваш код.
Поменял;) Спасибо
$('.selfmessage').on('keyup', function(e) {
if ($('.selfmessage').val().length>0){
$('#invite0').prop('checked', true);
}else{
$('#invite0').prop('checked', false);
}
});
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type = "radio" name = "msg_form" id = "invite0" value = "0"><label for = "invite0">
<textarea class = "selfmessage" for = "invite0" style = "height: auto !important;" name = "self_invite" type = "text" placeholder = "write something..."></textarea>
</label>
Добавьте событие keyup
в textarea
, затем проверьте, пустой ли textarea
. если не пусто, включите checkbox
, иначе включите его.
Найдите время, чтобы описать, в чем заключаются проблемы и почему это решение помогает. Помните, мы здесь для того, чтобы обучать людей, а не просто сбрасывать им код.
$('#id-textarea').click(function(){
$("#id-checkbox").attr("checked", true);
});
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<input type = "checkbox" id = "id-checkbox"/>
<textarea id = "id-textarea"></textarea>
</html>
поместите радио вход внутри метки