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

本文介绍了获取单选按钮的文本而不是值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这是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}，
函数（数据）{
 $（'＃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 \\ \\）;'>添加到购物车< / button>< / DIV>; 
 echo< / DIV>; 
 echo< / li>; 
 
 $ i ++; 
}

js只是获取所选单选按钮的值和名称产品。它工作正常。我的问题是我还想获得所选单选按钮的文本。 .text（）对我不起作用，我不知道为什么。帮帮我谢谢！：）

解决方案

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

tl;这里是一个现场演示：

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

考虑这个HTML，选择性别：

 < form ID = myForm会 > 
< label> 
< input type =radioname =gendervalue =m/> 
< span>男< / span> 
< / label> 
 
< label> 
< input type =radioname =gendervalue =f/> 
< span>女< / span> 
< / label> 
 
< label> 
< input type =radioname =gendervalue =o/> 
< span>其他< / span> 
< / label> 
< / form>

因为表格的ID为 myForm ，在JavaScript中，您可以访问当前选中的单选按钮，如下所示：

  var myForm = document.getElementById（myForm）; 
 var selectedRadio = myForm [gender];

从中，您可以获得单选框的值或包含的文本内容label：

  selectedRadio.value // m，f或o 
 selectedRadio.parentElement.textContent //男，女或其他

this is the 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>

this is the 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++;
}

The js simply gets the value of the radio button selected and the name of the product. It works fine. My problem is that I also want to get the text of the selected radio button. ".text()" is not working for me and I don't know why. Help Me Thanks! :)

解决方案

Using a form to access the selected radio button

tl;dr here is a live demo: http://jsfiddle.net/g105b/wchyLcfc/

A really nice trick is how browsers expose the selected radio button of a form, by its name.

Consider this HTML, with a gender choice:

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

Because the form has an ID of myForm, in JavaScript you can access the currently selected radio button like this:

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

and from this, you can get the value of the radio box, or the text content of the containing label:

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

这篇关于获取单选按钮的文本而不是值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！