jQuery获取文本，没有选中的无线选项的值，无法工作

Question

我有一个JavaScript/ jQuery练习，您选择了一个拥有房地产公司的收音机选项。一旦选中所列出的属性，返回表中的属性。这部分代码运行良好。但是，我想说明用户在标题中选择的公司名称，这意味着我需要无线电选项的文本。使用我现在的代码，它将返回所有公司的名称，而不仅仅是用户选择的公司的名称。我不知道为什么，因为我使用的.text()代码来自在线来源。能不能有人帮我不改变我的任何其他代码。

 <script>
    var realEstateFirms = {
    clark: {
    PropertyOne: "123 Pine Road Chester, PA 19013", 
    PropertyTwo: "407 Sunnyside Lane Philaelphia, PA 19013",
    PropertyThree: "400 Rothwell Terrace Chester, PA 19013",
    PropertyFour: "724 Tilghman Street Chester, PA 19013"
    },

    pinkChic: {
    PropertyOne: "201 Crestview Road Camden, NJ 08030",
    PropertyTwo: "1774 Layes Street Camden, NJ 08030",
    PropertyThree: "841 Crystal Lane Cherry Hill, NJ 08003",
    PropertyFour: "537 Foxhill Street Camden, NJ 08105"
    },

    jay: {
    PropertyOne: "2478 Brown Street Baltimore, MD 21210",
    PropertyTwo: "905 Price Boulevard Mitchellville, MD 20720",
    PropertyThree: "817 Cherry Lane Mitchellville, MD 20720",
    PropertyFour: "427 Central Avenue Baltimore, MD 21224"
    },

    ocean: {
    PropertyOne: "1402 Peachtree Road Atlanta, GA 30308",
    PropertyTwo: "267 Rigel Road Atlanta, GA 30332",
    PropertyThree: "311 Appletree Hill Road Atlanta, GA 30305",
    PropertyFour: "4822 Cascade Street Atlanta, GA 30331"
    },

    blackwell: {
    PropertyOne: "1601 Indiana Avenue Chicago, IL 60614",
    PropertyTwo: "775 Washington Boulevard Chicago, IL 60612",
    PropertyThree: "431 Dearborn Street Chicago, IL 60405",
    PropertyFour: "8822 Keeler Avenue Chicago, IL 60620"
    },
    }; // line closes array object realEstateFirms

    function selectRealEstate() {
    var selectedRadioOption = $("input[type='radio']:checked").val();
    console.log(selectedRadioOption);
    var firmSelectedName = $('label[for="realEstate-' + 
    selectedRadioOption + '"]').text();
    console.log(firmSelectedName);
    event.preventDefault();
    displayRealEstateInfo(realEstateFirms[selectedRadioOption], 
    firmSelectedName);
    console.log(realEstateFirms[selectedRadioOption]);
    }

    function displayRealEstateInfo(realEstateInfoList, firmTitle) {
    var tbl = "";
    tbl += '<table class="table table-hover">';
    tbl += '<tbody>';
    tbl += '<th>Real Estate Company:' + firmTitle + '</th>';
    tbl += '<tr>';
    tbl += '<th>Properties Listed</th>';
    tbl += '</tr>';
    tbl += '<tr>';
    tbl += '<td><div class="row_data" edit_type="click" 
    col_name="fname">' + realEstateInfoList["PropertyOne"] + '</div> 
    </td>'; 
    tbl += '</tr>';
    tbl += '<tr>';
    tbl += '<td><div class="row_data" edit_type="click" 
    col_name="fname">' + realEstateInfoList["PropertyTwo"] + '</div> 
    </td>';
    tbl += '</tr>';
    tbl += '<tr>';
    tbl += '<td><div class="row_data" edit_type="click" 
    col_name="fname">' + realEstateInfoList["PropertyThree"] + 
    '</div></td>';
    tbl += '</tr>';
    tbl += '<tr>';
    tbl += '<td><div class="row_data" edit_type="click" 
    col_name="fname">' + realEstateInfoList["PropertyFour"] + '</div> 
    </td>';
    tbl += '</tr>';
    tbl += '</tr>';
    tbl += '</tbody>';
    tbl += '</table>';
    $(document).find("#resultsTable").html(tbl);
    }
</script>

<p class="reList">Select One:</p>

<form action="javascript-exercise-13.html" method="post">
    <label for="realEstate-clark">
    <input type="radio" name="realEstateName" value="clark"> Clark Real Estate</label>
    <br/>
    <label for="realEstate-pinkChic">
    <input type="radio" name="realEstateName" value="pinkChic"> Pink Chic Realty<label> 
    <br/>
    <label for="realEstate-jay">
    <input type="radio" name="realEstateName" value="jay"> Jay and Sons Realty<label>
    <br/>
    <label for="realEstate-ocean">
    <input type="radio" name="realEstateName" value="ocean"> Ocean Real Estate Firm<label> 
    <br/>
    <label for="realEstate-blackwell">
    <input type="radio" name="realEstateName" value="blackwell"> Blackwell Realty<label> 
    <br/>
    <br/>
    <button class="realEstate" onclick="selectRealEstate()">Submit</button>
</form>
<div id="resultsTable"></div>

Answer 1

您的html无效，在html中没有关闭标签标记。更新html

<p class="reList">Select One:</p>
<form action="javascript-exercise-13.html" method="post">
    <label for="realEstate-clark">
        <input type="radio"
               name="realEstateName" value="clark"> Clark Real Estate
    </label><br>
    <label for="realEstate-pinkChic">
        <input type="radio"
               name="realEstateName" value="pinkChic"> Pink Chic Realty<label>
            <br>
            <label for="realEstate-jay">
                <input type="radio"
                       name="realEstateName" value="jay"> Jay and Sons Realty
            </label>
            <br>
            <label for="realEstate-ocean">
                <input type="radio"
                       name="realEstateName" value="ocean"> Ocean Real Estate Firm
            </label>
            <br>
            <label for="realEstate-blackwell">
                <input type="radio"
                       name="realEstateName" value="blackwell"> Blackwell Realty
            </label>
            <br>
            <br />
            <button class="realEstate"
                    onclick="selectRealEstate()">
                Submit
            </button>
</form>
<div id="resultsTable"></div>

若要获得选定的单选按钮文本，请使用

   var selText=$("input[type='radio']:checked").closest("label").text().trim();