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

Question

我想要做的是获取输入到文本区域中的用户信息，以根据某人的程度显示为消息。 因此，如果我选中BA的框，则光标将集中在BA文本区域上，并取决于我输入的内容：可以说：Science，消息将显示为firstName +“您具有以下程度：
科学学士学位。”，或者如果我在MA文本区域中选中MA复选框和光标.focus（es），然后输入Business，则它将显示为“ firstName +”，您具有以下学位：
MA的业务。”等。感谢您的帮助。

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都不匹配，因为无法检查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>