如何合并 2 个不同的 jquery 事件函数？

Question

我需要将值从文本输入和单选输入字段传递到隐藏的文本输入。当单独输入时一切正常，但在触发时每个都会替换另一个。我需要将收音机附加到文本输入上。

$(function() {
  $("#text").keyup(function() {
    var text = ($("#text").val() != "" ? $("#text").val()+"," : "");
    $("#hidden").val(text);
  });
  $("input[name=radio]").click(function() {
    var radio = $("input[name=radio]:checked").val();
    $("#hidden").val(radio);
  });
});

我需要的输出

$("#hidden").val(text + radio);

我试过的

$(function() {
  $("#text").keyup(function() {
    var text = ($("#text").val() != "" ? $("#text").val()+"," : "");
  });
  $("input[name=radio]").click(function() {
    var radio = $("input[name=radio]:checked").val();
  });

  $("#hidden").val(text + radio);
});

但是没有返回任何值。

如何连接 keyup() 和 click() 事件的输出？

Answer 1

试试这个

function getText() {
  var text = [], val = $.trim($("#text").val()), $rad = $("input[name=radio]:checked");
  if (val) text.push(val);
  if ($rad.length >= 1) text.push($rad.val());
  $("#hidden").val(text.join(","));
}
$(function() {
  $("#text").on("input",getText);
  $("input[name=radio]").on("change",getText);
});

Answer 2

试试这个，效果很好

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
var radioValue="";
var text="";
$(function() {
  $("#text").keyup(function() {  
    text = ($("#text").val() != "" ? $("#text").val()+"," : "");
    if($("input[name='gender']:checked").val()!=undefined){
     checkedValue = $("input[name='gender']:checked").val();
    }
    else{
    checkedValue = ""
    }
    $("#hidden").text(text + "--" + checkedValue);
  });
  $("input[name='gender']").click(function() {
   textValue = $("#text").val();
    radioValue = $("input[name='gender']:checked").val();
    $("#hidden").text(textValue + "--" +radioValue);
  });
});
</script>
</head>
<body>
<input type="text" id="text"/><br/><br/>
 <label><input type="radio" name="gender" value="male">Male</label> 
        <label><input type="radio" name="gender" value="female">Female</label><br/>
<label id="hidden" style="color:red;font-weight:bold;"></label>
</body>
</html>

如何合并 2 个不同的 jquery 事件函数？

How to merge 2 different jquery event functions?

jquery

click

keyup

我需要的输出

我试过的