Question

我试图为每个单选按钮分配2个值，以便在2个字段中输出。但它不起作用。这里的代码使用：

＆＃13;

~/.jupyter/custom/custom.js

＆＃13;

Answer 1

这里有几个不同的问题。首先，answerB文本字段需要设置value，而不是设置valueB。其次，您将两者设置为相同的值。因此，不要将this.value传递到check函数，只需传递this即可。然后，您可以使用.getAttribute('valueB')访问自定义属性。

另外，请勿在逗号中添加逗号。我从您的<input>代码中删除了这些内容。

见下文：

＆＃13;

<!DOCTYPE html>
    <html>
    <head>
    <script>
    function check(browser) {
        document.getElementById("answer").value=browser.value;
        document.getElementById("answerB").value=browser.getAttribute('valueB');
    }
    </script>
    </head>
    <body>
    
    <p>What's your favorite browser?</p>
    
    <form>
    <input type="radio" name="browser" onclick="check(this)" value="400mb" valueB="600mb">Internet Explorer<br>
    <input type="radio" name="browser" onclick="check(this)" value="600mb" valueB="700mb">Firefox<br>
    <input type="radio" name="browser" onclick="check(this)" value="500mb" valueB="500mb">Opera<br>
    <input type="radio" name="browser" onclick="check(this)" value="500mb" valueB="500mb">Google Chrome<br>
    <input type="radio" name="browser" onclick="check(this)" value="300mb" valueB="300mb">Safari<br>
    <br>
    PC Min Ram Requirement is: <input type="text" id="answer" size="20">
    Mac Min Ram Requirement is:  <input type="text" id="answerB" size="20">
    </form>
    
    </body>
    </html>

＆＃13;

Answer 2

您可以使用data-属性设置值，例如

data-value="400mb" data-valueB="600mb"

即，

<input type="radio" class = "radiobutton" onclick="check(this)" name="browser" data-value="400mb" data-valueB="600mb" />

然后，您可以使用check之类的，jQuery功能访问

    function check(rb) {
       document.getElementById("answer").value = $(rb).data('value');
       document.getElementById("answerB").value = $(rb).data('valueB');
    }

，或者

$('.radiobutton').click(function () {
            document.getElementById("answer").value = $(this).data('value');
            document.getElementById("answerB").value = $(this).data('valueB');
}

Answer 3

纯粹的js解决方案：

一些注意事项：如果你将this.value传递给函数，那么你就不能再访问valueB了，只传递整个元素。要设置值，只使用TargetElement.value而不是value和valueB（那只是错误的）。不知道为什么你有一个逗号后面的值（这也错了）

＆＃13;

function check(browser) {
  document.getElementById("answer").value = browser.getAttribute("value");
  document.getElementById("answerB").value = browser.getAttribute("valueB");
}

＆＃13;

<form>
  <input type="radio" name="browser" onclick="check(this)" value="400mb" valueB="600mb">Internet Explorer
  <br>
  <input type="radio" name="browser" onclick="check(this)" value="600mb" valueB="700mb">Firefox
  <br>
  <input type="radio" name="browser" onclick="check(this)" value="500mb" valueB="500mb">Opera
  <br>
  <input type="radio" name="browser" onclick="check(this)" value="500mb" valueB="500mb">Google Chrome
  <br>
  <input type="radio" name="browser" onclick="check(this)" value="300mb" valueB="300mb">Safari
  <br>
  <br>PC Min Ram Requirement is:
  <input type="text" id="answer" size="20">Mac Min Ram Requirement is:
  <input type="text" id="answerB" size="20">
</form>

＆＃13;

Answer 4

此代码存在一些问题。

1）您需要将两个值（或元素本身）传递给函数

onclick="check(this)"

这是因为您只是传递了＆＃34;值＆＃34;归因于函数。

2）你需要检索＆＃34; valueB＆＃34;作为正常属性。财产＆＃34;价值B＆＃34;不存在，因此目前尚未定义。

    function check(element) {
        document.getElementById("answer").value=element.value;
        document.getElementById("answerB").value=element.getAttribute("valueB");
    }

在功能检查中你还试图设置＆＃34; valueB＆＃34;元素的属性＆＃34; answerB＆＃34;，这没有意义（你需要将正常值设置为文本框:)）

Answer 5

我使用string.split修复了代码，没有任何外部库。您还尝试访问目标valueB上的input时出现引用错误。

    <!DOCTYPE html>
    <html>
        <head>
            <script>
                function check(browser) {
                    var splitValues = browser.split(';');
                    document.getElementById("answer").value=splitValues[0];
                    document.getElementById("answerB").value=splitValues[1];
                }
            </script>
        </head>
        <body>
        
        <p>What's your favorite browser?</p>
        
        <form>
            <input type="radio" name="browser" onclick="check(this.value)"     value="400mb;600mb">Internet Explorer<br>
            <input type="radio" name="browser" onclick="check(this.value)"     value="600mb;700mb">Firefox<br>
            <input type="radio" name="browser" onclick="check(this.value)"     value="500mb;500mb">Opera<br>
            <input type="radio" name="browser" onclick="check(this.value)"     value="500mb;500mb">Google Chrome<br>
            <input type="radio" name="browser" onclick="check(this.value)"     value="300mb;300mb">Safari<br>
            <br>
            PC Min Ram Requirement is: <input type="text" id="answer" size="20">
            Mac Min Ram Requirement is:  <input type="text" id="answerB" size="20">
        </form>
        
        </body>
    </html>

为每个单选按钮分配2个值

5 个答案: