javascript - 使用 jQuery 获取要显示的复选框和文本区域的文本

Question

我想做的是获取输入到文本区域的用户信息，根据某人拥有的程度显示为消息。因此，如果我选中 BA 复选框，光标将聚焦在 BA 文本区域，并根据我输入的内容:比如说:科学，消息将显示为名字 + “您拥有以下学位:
科学学士学位。 ”或者，如果我选中 MA 复选框并将光标聚焦在 MA 文本区域上，然后输入 Business，那么它将显示为“firstName +“您拥有以下学位:
商科硕士。”等.如有任何帮助，我们将不胜感激。

HTML 代码:

<div id="mycbxs">
        <br><strong>&nbsp;</strong>
        <br><input type="checkbox" id="BAcbx" value="B"> BA
        <br><input type="checkbox" id="MAcbx" value="M"> MA
        <br><input type="checkbox" id="PHDcbx" value="P"> PHD
    </div>

    <div id="myinputs">
        <br><strong>Discipline</strong>
        <br><input type="text" id="BAText" size="30">
        <br><input type="text" id="MAText" size="30">
        <br><input type="text" id="PHDText"  size="30">

        <br><br>
        <input type="button" id="myclick" value="Submit Degree Info">
        <br>
        <p id="message"></p>
    </div>

jQuery 代码:

      $(document).ready(function(){

 $("#myclick").click(function(){

     var myFirst = $("#first_name").val().trim();
     $("#first_name").val(myFirst);

     var myMessage = myFirst + "." + " You have yet to earn any degrees.";

     if(!myFirst)
     {
     $("#message").text() = "";
     }
     else
     {
       $("#message").text(myMessage);
     } 

 });


 $("input[type='checkbox']").click(function(){

  var radioButtonsChecked = $("#mycbxs input[type ='checkbox']:checked").val();

   $("#myinputs input[type ='text']").val();

  if(radioButtonsChecked == "B") 
   { 
    $("#BAText").focus(); 
   } 
   if(radioButtonsChecked == "M") 
   { 
    $("#MAText").focus(); 
   } 
   if(radioButtonsChecked == "P") 
   { 
    $("#PHDText").focus(); 
   }
 });




 $("#myclick").click(function(){

     var myFirst = $("#first_name").val().trim();
     $("#first_name").val(myFirst);

    $("#myinputs input[type ='text']").val();


     var myDegree = '';

     var radioButtonsChecked = $("#mycbxs input[type ='checkbox']:checked").val();

     var myMessage = myFirst + "." + " You have yet to earn any degrees.";

     if(!myFirst)
     {
     $("#message").text() = "";
     }
     else
     {
       $("#message").text(myMessage);
     } 


    if(radioButtonsChecked  == "B") 
    {
        myDegree = $("#BAText").val();
    }

    if(radioButtonsChecked  == "M") 
    {
        myDegree = $("#MAText").val();
    }

    if(radioButtonsChecked  == "P") 
    {
        myDegree = $("#PHDText").val();
    }

    var myMsg = myFirst + " You have the following degrees:" + "<br>" + "<br>" + myDegree;

    $("#message").html(myMsg);
});


});

Answer 1

一些问题:

• $("#message").text() = ""; 是无效语法。它应该是 $("#message").text("");
• 在错误的地方有一些反引号`；您的问题可能有错字
• 同一个按钮有两个点击处理程序，原则上这不一定是问题，但在这里它们都设置消息。所以第一个处理程序确实无关紧要。
• CSS 选择器 input[type ='text']:checked 与任何内容都不匹配，因为无法检查 text 输入元素。

有些东西还可以写得更高效、更简洁:

$(document).ready(function(){
    var degree = { B: $("#BAText"), M: $("#MAText"), P: $("#PHDText") };
    
    $("#mycbxs input[type='checkbox']").click(function(){
        if ($(this).is(":checked")) degree[$(this).val()].focus(); 
    });

    $("#myclick").click(function(){
        var myFirst = $("#first_name").val().trim();
        $("#first_name").val(myFirst);
        var $checked = $("#mycbxs input[type='checkbox']:checked");
        var myDegrees = $checked.map(function () {
            return $(this).attr("name");
        }).get().concat($checked.map(function () {
            return degree[$(this).val()].val();
        }).get()).join(', ');
        var myMsg = !myFirst ? "Please enter your name."
                : myDegrees ? myFirst + ". You have the following degrees: " + myDegrees
                : myFirst + ". You have yet to earn any degrees.";
        $("#message").text(myMsg);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="first_name" value="John"> 
<div id="mycbxs">
    <input type="checkbox" id="BAcbx" value="B" name="BA"> BA
    <br><input type="checkbox" id="MAcbx" value="M" name="MA"> MA
    <br><input type="checkbox" id="PHDcbx" value="P" name="PHD"> PHD
</div>

<div id="myinputs">
    <strong>Discipline</strong>
    <br><input type="text" id="BAText" size="30">
    <br><input type="text" id="MAText" size="30">
    <br><input type="text" id="PHDText"  size="30">

    <br>
    <input type="button" id="myclick" value="Submit Degree Info">
    <span id="message"></span>
</div>