个人中心
gpt4 book ai didi

javascript - 如何动态更改单选按钮显示的信息？

转载 作者：行者123 更新时间：2023-12-03 06:07:26 25 4
gpt4 key购买 nike

(重复？)我已经尝试了几个与此相关的 Stackoverflow 帖子，但我无法让 javaScript 示例正常工作。我想暂时避免使用 jQuery。

我想使用javascript创建动态显示单选按钮的信息。在此示例中，我想编写一个函数来显示这些单选按钮“Answer 1”和“Answer 2”的一些其他值。 例如，我实际上并不想要“答案 1”。目标是让用户单击多项选择答案之一，然后点击提交/保存以 self 检查自己的知识。

screen shot multiple choice answer window

通过我更复杂的项目代码，我已经了解到，提交/保存按钮被硬编码到 html <form> 中。部分似乎与单选按钮显示的值没有关联，我设法使用 javaScript 添加了这些值 * 在我看来，更改硬编码信息 已经由单选按钮显示按钮可能起作用。

当用户单击提交/“保存”按钮时，我不需要需要引用单选按钮显示的实际答案信息。在本例中，我只需要知道它是选择的第一个答案还是第二个答案。

<html>

<script type="text/javascript">
function OnSubmitForm()

{
  if(document.myform.operation[0].checked == true)
    {
    alert ( "You have selected the first answer" );  
    }
  else
    if(document.myform.operation[1].checked == true)
        {
        alert ( "You have selected the SECOND answer" );  
        }

}
</script>
<form name="myform" onsubmit="return OnSubmitForm();">
   <input type="radio" name="operation" value="1" checked>Answer 1
   <input type="radio" name="operation" value="2">Answer 2
   <p>
   <input type="submit" name="submit" value="save">
   </p>
</form>

</html>

(我不知道是否应该包含我也尝试过的以下示例)

顺便说一句，这是我尝试过的另一个例子 - 一个帖子，但我无法让这个想法发挥作用。我试图让第一个单选按钮显示“垃圾”而不是最初硬编码的“Answer1”。但我从发布中借用的代码出现了错误，无法解决。

来自 Javascript how to change radio button label text? enter image description here 

    <html>
    <form name="myform" onsubmit="return OnSubmitForm();">
       <input type="radio" id = 'first'  name="operation" value="1" checked <label for="alsoFirst"> Answer 1
       <input type="radio" id = 'second'  name="operation" value="2"<label for="alsoSecond">Answer 2

       <p>
       <input type="submit" name="submit" value="save">
       </p>
    </form>



    <script type="text/javascript">
     document.addEventListener('readystatechange', function() {
      // Seems like a GOOD PRACTICE - keeps me from getting type error I was getting

        // https://stackoverflow.com/questions/14207922/javascript-error-null-is-not-an-object

        if (document.readyState === "complete") {
          init();
        }
      });

     function init() {

        console.log ("expect to change -Answer 1- displayed by first button to word junk");


         // this works
        var label = document.getElementById('first').getElementsByTagName('alsoFirst') [0];
        // this does not work
        label.innerHTML = 'junk';
        }

    //http://www.javascript-coder.com/html-form/html-form-action.phtml
    function OnSubmitForm()
    {
      if(document.myform.operation[0].checked == true)
        {
        alert ( "You have selected the first answer" );  
        }
      else
        if(document.myform.operation[1].checked == true)
            {
            alert ( "You have selected the SECOND answer" );  
            }

        if (document.uniqueName.checked == true){
            alert ( "You have selected the THIRD answer" );  
            }

    }

    /*
    <input type="radio" name="sex" id="male" value="male">
            <label for="male">Male</label>
      </input>

    var input = document.getElementById('male');
    var label = input.getElementsByTagName('label')[0];
    label.innerHTML = 'New Text';

    */
    //https://stackoverflow.com/questions/32292962/javascript-how-to-change-radio-button-label-text
    </script>




    </html>
  • 我之前通过插入表行和连接字符串从数组中获取值来显示。这有效，并进入表格，但没有绑定(bind)到硬编码到原始<form>中的提交/保存按钮。 。我仍然计划在表格中添加单选答案按钮，但我试图在这里做一个更基本的示例。

最佳答案

我对通过 document.getElementByTagName() 获取标签进行了一些修改，并对 OnSubmitForm() 函数进行了一些更改。只需粘贴您的代码，并在下面进行这些更改，并在最后粘贴演示链接。

 <html>
<form name="myform" onsubmit="OnSubmitForm();">
   <input type="radio" id = 'first'  name="operation" value="1"
          checked> <label for="alsoFirst"> Answer 1 </label>
   <input type="radio" id = 'second'  name="operation" value="2">
  <label for="alsoSecond">Answer 2</label>

   <p>
   <input type="submit" name="submit" value="save">
   </p>
</form>



<script type="text/javascript">
 document.addEventListener('readystatechange', function() {
  // Seems like a GOOD PRACTICE - keeps me from getting type error I was getting

    // http://stackoverflow.com/questions/14207922/javascript-error-null-is-not-an-object

    if (document.readyState === "complete") {
      init();
    }
  });

 function init() {

    console.log ("expect to change -Answer 1- displayed by first button to word junk");


     // this works
    var label = document.getElementsByTagName('label') [0];
    // this does not work
    label.innerHTML = 'junk';
    }

//http://www.javascript-coder.com/html-form/html-form-action.phtml
function OnSubmitForm()
{
  if(document.getElementById('first').checked == true)
    {
    alert ( "You have selected the first answer" );  
    }
  else
    if(document.getElementById('second').checked == true)
        {
        alert ( "You have selected the SECOND answer" );  
        }

  return false;
}

/*
<input type="radio" name="sex" id="male" value="male">
        <label for="male">Male</label>
  </input>

var input = document.getElementById('male');
var label = input.getElementsByTagName('label')[0];
label.innerHTML = 'New Text';

*/
//http://stackoverflow.com/questions/32292962/javascript-how-to-change-radio-button-label-text
</script>




</html>

演示:https://jsbin.com/sojojiy/27/edit?html,console,output

希望这有帮助。谢谢!

关于javascript - 如何动态更改单选按钮显示的信息？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39478094/

25 4 0
文章推荐： javascript - 从内存中 Meteor 的 Minimongo 中删除已传递的消息
文章推荐： javascript - 回调实例冲突？
文章推荐： javascript - 如何为不同的元素设置相同的url
文章推荐： javascript - Google 网站可折叠列表
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com