单击文本区域时设置单选按钮选中

Question

尝试设置单击文本区域时选中的单选按钮。有一个单选按钮标签，标签内有一个文本区域，所以我需要的是，当点击文本区域写入输入时，将检查输入。

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

Answer 1

您可以通过使用 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 的功能几乎完全是多余的。我只留下它以防您的 UI 样式依赖于它。如果没有，我建议将其删除。

另请注意，我删除了 oninput 事件属性并将其更改为不显眼的处理程序，还将内联样式更改为外部 CSS。应尽可能避免内联 JS 和 CSS。

Answer 2

您可以使用 keyup 或 input 或 change 或 focus 或任何您喜欢的触发器。 here is a list of often used trigger

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

Answer 3

$('.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 否则禁用它。

Answer 4

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

单击文本区域时设置单选按钮选中

Set radio button checked when click on textarea

html

javascript

jquery

textarea

input