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

您可以使用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 2

您可以使用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 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>

单击文本区域时

4 个答案: