获取单选按钮的文本而不是值

时间:2012-02-20 17:46:51

标签: jquery

这是JS

    <SCRIPT type="text/javascript">
    $(function() 
    {   

        var ids = new Array();

        for(var i = 0; i < <?php  echo $numR; ?>; i++)
        {
            ids.push(i);
        }

        function f(place) {
           $("#prod_btn" + place).click(function () {

                var combine = "prod_title" + place;
                var userNameVal = $("#" + combine).val();
                var radVal = $('input:radio[name=prod_rad' + place +']:checked').val();
                $.post( 
                 "cart.php",
                 { uval : userNameVal,
                    rval : radVal },
                 function(data) {
                    $('#show_search2').html(data);
                 }

              );


           });
        }

        for (var i=0; i<ids.length; i++) 
        {

           f(ids[i]);
        }

    });
</SCRIPT>

这是HTML

while ($i < $numR)
{
$prod_image_id = 'prod_image'.$i.'';
$prod_title_id = 'prod_title'.$i.'';
$prod_priceM_id = 'prod_priceM'.$i.'';
$prod_priceA_id = 'prod_priceA'.$i.'';
$prod_priceH_id = 'prod_priceH'.$i.'';
$prod_priceP_id = 'prod_priceP'.$i.'';
$prod_rad_id = 'prod_rad'.$i.'';
$prod_btn_id = 'prod_btn'.$i.'';

$prodID         = mysql_result($result, $i, "astm_product_ID");
$prodName       = mysql_result($result, $i, "astm_product_name");
$prodPic        = mysql_result($result, $i, "astm_product_image");

$mPrice         = mysql_result($result, $i, "astm_mill_finish_price");
$aPrice         = mysql_result($result, $i, "astm_anodised_price");
$hPrice         = mysql_result($result, $i, "astm_hanolok_price");
$pPrice         = mysql_result($result, $i, "astm_powdercoat_price");

    echo "<li>";
    echo "<DIV id='prod_container'>";
    echo "<DIV id = 'fp1'><center><IMG class = 'imagesize' src='images/fp1.png' id = '$prod_image_id'/></center></DIV>";
    echo "<DIV><p>$prodName<p><input type = 'hidden' id = '$prod_title_id' value = '$prodName' /></DIV>";
    echo "<DIV><input type='radio' value='$mPrice' name='$prod_rad_id'>Mill Finish - Php $mPrice</input></DIV>";
    echo "<DIV><input type='radio' value='$aPrice' name='$prod_rad_id'>Anodised - Php $aPrice</input></DIV>";
    echo "<DIV><input type='radio' value='$hPrice' name='$prod_rad_id'>Hanolok - Php $hPrice</DIV>";
    echo "<DIV><input type='radio' value='$pPrice' name='$prod_rad_id'>Powder Coat - Php $pPrice</input></DIV>";
    echo "<DIV><button type='button' id = '$prod_btn_id' onClick = 'fg_popup_form(\"fg_formContainer\",\"fg_form_InnerContainer\",\"fg_backgroundpopup\");'>Add to Cart</button></DIV>";
    echo "</DIV>";
    echo "</li>";

$i++;
}

js只是获取所选单选按钮的值和产品名称。它工作正常。我的问题是我还想获得所选单选按钮的文本。 “.text()”对我不起作用,我不知道为什么。帮帮我谢谢! :)

2 个答案:

答案 0 :(得分:13)

使用表单访问所选单选按钮

tl; dr这是一个现场演示: http://jsfiddle.net/g105b/wchyLcfc/

一个非常好的技巧是浏览器如何通过名称公开表单的选定单选按钮。

考虑这个HTML,选择性别:

<form id="myForm">
    <label>
        <input type="radio" name="gender" value="m" />
        <span>Male</span>
    </label>

    <label>
        <input type="radio" name="gender" value="f" />
        <span>Female</span>
    </label>

    <label>
        <input type="radio" name="gender" value="o" />
        <span>Other</span>
    </label>
</form>

由于表单的ID为myForm,因此您可以在JavaScript中访问当前选中的单选按钮,如下所示:

var myForm = document.getElementById("myForm");
var selectedRadio = myForm["gender"];

从中可以获得单选框的值或包含标签的文本内容:

selectedRadio.value // m, f or o
selectedRadio.parentElement.textContent // Male, Female or Other

答案 1 :(得分:1)

使用要为单选按钮显示的文本分配自定义Data- *属性,您可以使用jquery中的一行代码获取单选按钮的文本,如下所示:

HTML
    <input id="radio4" name="radios1" type="radio" value="4" data-value="radio 4" /> radio 4
    <input id="radio5" name="radios1" type="radio" value="4" data-value="radio 5"/> radio 5

Script:
        $("input[name=radios1]:checked").attr("data-value");

有关自定义数据 - *属性的详细信息,请访问:http://www.w3schools.com/tags/att_global_data.asp