Assign 2 Values to each radio button

前端未结

关注

 5  1455

I\'m trying to assign 2 values to each radio button, to output in 2 fields. But it doesn\'t work. Here the code im using:

相关标签:

5条回答

故里飘歌

2021-01-24 19:58

a pure js solution:

some notes: if you pass this.value to the function then you cant access valueB anymore, pass just the entire element. To set the value use just theTargetElement.value not value and valueB ( thats just wrong ). Dont know why you ve a comma after value ( thats wrong too )

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

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

0 讨论(0)

旧时难觅i

2021-01-24 20:01

You have a few different issues here. First, the answerB text field needs to have its value set, not valueB set. Second, you are setting both to the same value. So, instead of passing this.value into the check function, just pass this. Then you can use .getAttribute('valueB') to access your custom property.

Also, don't put commas in html tags. I removed those from your <input> tags.

See below:

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

0 讨论(0)

名媛妹妹

2021-01-24 20:06

You can set value by using data- property like,

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

That is,

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

Then you can access in the check function using jQuery like,

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

or,

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

0 讨论(0)

感情败类

2021-01-24 20:16

I fixed your code by using string.split, and without any external libraries. You also had a reference error trying to access valueB on the target 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>

0 讨论(0)

梦如初夏

2021-01-24 20:19
this code have some problems.

1) you need to pass two values (or the element itself) to the function
```
onclick="check(this)"  
```
this is because you're just passing the "value" attribute to the function.

2) you need to retrieve "valueB" as a normal attribute. the property "valueB" doesn't exists and so is currently undefined.
```
    function check(element) {
        document.getElementById("answer").value=element.value;
        document.getElementById("answerB").value=element.getAttribute("valueB");
    }
```
in the function check you're also trying to set "valueB" property of the element "answerB", which doesn't make sense (you need to set the normal value to the textbox :))
0 讨论(0)
发布评论:

提交评论
- 加载中...

热议问题