Установите переключатель, установленный при нажатии на текстовое поле

Попытка установить переключатель, установленный при нажатии на текстовое поле. Есть метка для переключателя, а внутри метки есть текстовое поле, поэтому мне нужно, чтобы при нажатии на текстовое поле для записи вход был проверен.

<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>

поместите радио вход внутри метки

Niraj Kaushal 26.10.2018 09:06

@NirajKaushal, который здесь не работает, поскольку сам textarea является интерактивным элементом.

Rory McCrossan 26.10.2018 09:08
0
2
613
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Вы можете добиться этого, используя 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>

В вашем описании указаны различные события, которые использует ваш код.

Rory McCrossan 26.10.2018 09:09

Поменял;) Спасибо

Patrick Schocke 26.10.2018 09:11

$('.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, иначе включите его.

Найдите время, чтобы описать, в чем заключаются проблемы и почему это решение помогает. Помните, мы здесь для того, чтобы обучать людей, а не просто сбрасывать им код.

Rory McCrossan 26.10.2018 09:12

$('#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>

Другие вопросы по теме