Question

我需要从一组单选按钮中获取所选单选按钮的值，以下代码适用于chrome。我可以在输入上使用value属性，但是在Edge和IE上，myRadio上没有value属性。

是否有一个不错的跨浏览器替代方法，可以使用纯JavaScript来获取所选单选按钮的值？

function test(){
  //prints selected button's value on chrome while undefined on Edge
  console.log(document.getElementById("myForm").myRadio.value);
}

<form id="myForm">
  <input type="radio" name="myRadio" value="0" />
  <input type="radio" name="myRadio" value="1" />
  <input type="radio" name="myRadio" value="2" />
</form>
<button onClick="test()">Test</button>

Answer 1

只需选择具有“已选中”属性的唯一对象即可：

function test(){
  //prints selected button's value on chrome while undefined on Edge
  console.log(document.querySelector('input[name="myRadio"]:checked').value);
}

<form id="myForm">
  <input type="radio" name="myRadio" value="0" />
  <input type="radio" name="myRadio" value="1" />
  <input type="radio" name="myRadio" value="2" />
</form>
<button onClick="test()">Test</button>

Answer 2

我认为queryselector应该在所有浏览器中都能正常工作。

@interface ArucoPayload : NSObject

@property BOOL valid; // Used to determine if the tracking was valid and hides the scenekit nodes if not
@property UIImage *image;
@property CGRect boardSize;
@property SCNVector4 rotationVector;
@property SCNVector3 translationVector;
@end

Mat rvec(3, 1, DataType<double>::type);
Mat tvec(3, 1, DataType<double>::type);

...
aruco::estimatePoseBoard(corners, markerIds, gridBoard, self.camMatrix, self.distCoeffs, rvec, tvec);
[self updateCameraProjection:payload withRotation:rvec andTranslation:tvec];
...

-(void) updateCameraProjection:(ArucoPayload *)payload withRotation:(Mat)rvec andTranslation:(Mat)tvec {

    cv::Mat RotX(3, 3, cv::DataType<double>::type);
    cv::setIdentity(RotX);
    RotX.at<double>(4) = -1;
    RotX.at<double>(8) = -1;

    cv::Mat R;
    cv::Rodrigues(rvec, R);

    R = R.t();
    Mat rvecConverted;
    Rodrigues(R, rvecConverted); 
    rvecConverted = RotX * rvecConverted;

    Mat tvecConverted = -R * tvec;
    tvecConverted = RotX * tvecConverted;

    payload.rotationVector = SCNVector4Make(rvecConverted.at<double>(0), rvecConverted.at<double>(1), rvecConverted.at<double>(2), norm(rvecConverted));
    payload.translationVector = SCNVector3Make(tvecConverted.at<double>(0), tvecConverted.at<double>(1), tvecConverted.at<double>(2));
}

func updateCameraPosition(payload:ArucoPayload) {

    if(payload.valid) {

        sceneView.scene?.rootNode.isHidden = false

        // Add nodes first time we get an updated position
        if(sceneView.scene?.rootNode.childNodes.count == 1) {

            // Add box node
            addBoxNode(to: sceneView, payload: payload)
        }

        cameraNode.rotation = payload.rotationVector
        cameraNode.position = payload.translationVector

    } else {

        sceneView.scene?.rootNode.isHidden = true
    }
}

function test(){
  //prints selected button's value on chrome while undefined on Edge
  console.log(document.querySelector('#myForm input[name="myRadio"]:checked').value);
}

Answer 3

似乎Edge返回了HtmlCollection而不是RadioNodeList。

document.getElementById（“ myForm”）。myRadio的结果位于

：

EDGE

HtmlCollection length="3">
<input name="myRadio" type="radio" value="0"></input>
<input name="myRadio" type="radio" value="1"></input>
<input name="myRadio" type="radio" value="2"></input>
</HtmlCollection>

Chrome

RadioNodeList(3) [input, input, input, value: "1"]
0: input
1: input
2: input
length: 3
value: "1"

您可以尝试使用：checked

console.log（document.querySelector（'input [name =“ myRadio”]：checked'）。value）;

Answer 4

您可以尝试使用以下方法：

方法1：使用document.querySelector（）方法：

    function test() {
        //prints selected button's value on chrome while undefined on Edge
        console.log(document.querySelector("input[name = 'myRadio']:checked").value);
    }

方法2：使用document.getElementsByName（）方法获取单选列表，然后检查选中了哪个单选：

    function test() {
        //prints selected button's value on chrome while undefined on Edge

        var radioes = document.getElementsByName('myRadio');
        var selectedvalue;
        for (var i = 0; i < radioes.length; i++) {
            if (radioes[i].checked) {
                selectedvalue = radioes[i].value;
            }
        }
        console.log(selectedvalue);
    }

方法3：使用JQuery选择器添加JQuery引用以获取检查值：

jQuery参考：

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

JavaScript方法：

    function test() {
        //prints selected button's value on chrome while undefined on Edge

        console.log($("input:radio[name='myRadio']:checked").val());
    }

如何在Microsoft Edge中获取选定的单选按钮的值？

4 个答案: