单击 textarea 时设置单选按钮选中答案

【问题标题】：Set radio button checked when click on textarea单击 textarea 时设置单选按钮选中
【发布时间】：2018-10-26 06:59:57
【问题描述】：

尝试在单击 textarea 时设置单选按钮。单选按钮有一个标签，标签内有一个 textarea，所以我需要的是，当单击 textarea 写入输入时将被检查。

<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 本身就是一个可点击的元素。

标签： javascript jquery html input textarea

【解决方案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>

【讨论】：

您的描述说明了您的代码正在使用的不同事件。
我已经改了 ;) 谢谢

【解决方案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。

【讨论】：

【解决方案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 否则禁用它。

【讨论】：

请花时间描述问题是什么以及为什么这个解决方案有帮助。请记住，我们在这里是为了教育人们，而不仅仅是在他们身上转储代码。

【解决方案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>

【讨论】：