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

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

时间：2019-09-06 06:07:46

标签： jquery click keyup

我需要将值从文本输入和单选输入字段传递到隐藏的文本输入。当单独完成输入时，所有功能都可以正常工作，但在触发时彼此替换。我需要将收音机附加到文本输入上。

$(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（）事件的输出？

2 个答案:

答案 0 :(得分：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);
});

答案 1 :(得分：1)

尝试一下，效果很好

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