如何在单选按钮上调用Javascript函数单击非焦点_Javascript_Html_Onclick

如何在单选按钮上调用Javascript函数单击非焦点

javascript html

如何在单选按钮上调用Javascript函数单击非焦点,javascript,html,onclick,Javascript,Html,Onclick,我有一个表格，每行包含一个单选按钮。我在单选按钮上调用JavaScript函数onclick事件，如下所示 <input type="radio" id="rdbSelect" name="Select" onclick="MyFunction()" /> 和JavaScript function CreateGrid() { var Grid = document.getElementById('Table1') for (var i = 1; i < 6;

我有一个表格，每行包含一个单选按钮。我在单选按钮上调用JavaScript函数

onclick

事件，如下所示

<input type="radio" id="rdbSelect" name="Select" onclick="MyFunction()" />

和JavaScript

function CreateGrid() {
    var Grid = document.getElementById('Table1')
    for (var i = 1; i < 6; i++) {
        var newrow = Grid.rows[Grid.rows.length - 1].cloneNode(true);
        newrow.cells[0].innerText;
        newrow.cells[1].children[0].value = '';
        newrow.cells[2].children[0].value = '';
        Grid.getElementsByTagName('tbody')[0].appendChild(newrow);
    }
}

function Test() {
    alert("Hello");
}

函数CreateGrid（）{ var Grid=document.getElementById（'Table1'）对于（变量i=1；i<6；i++）{ var newrow=Grid.rows[Grid.rows.length-1].cloneNode（true）； newrow.cells[0].innerText； newrow.cells[1]。子项[0]。值=“”； newrow.cells[2]。子项[0]。值=“”； Grid.getElementsByTagName（'tbody'）[0].appendChild（newrow）； } } 功能测试（）{ 警惕（“你好”）； } 任何帮助都将不胜感激。

您可以试试这个

 <input type="radio" name="rd1" id="red" onchange="myFunction()">select

选择

例如：-

<html>
<body>
<input type="radio" name="rd1" id="red" onchange="myFunction()">select<br>
<script>

function myFunction() {
alert("radio selected");
}

 </script>

</body>
</html>


选择

函数myFunction（）{
警报（“选择无线电”）；
}

请试试这个

document.getElementById("rdbSelect").click()

我用以下方法解决了这个问题：

如果调用事件键盘向下（偶数优先），则取消所有事件

选项一

选择二
window.changeEvent=函数（元素、事件）{
如果（event.keyCode==0）{
console.log（“单击事件”）；
//警报（“点击事件”）；
}否则{
console.log（“键盘事件”）；
//警报（“键盘事件”）；
event.preventDefault（）；
}
}

选项一

选择二
$（“输入[name=aradio]”）
。打开（“单击”，更改事件）
.开启（“按键关闭”，changeEvent）；
函数更改事件（事件）{
if（event.originalEvent.keyCode==0）{
console.log（“单击事件”）；
//警报（“点击事件”）；
}否则{
console.log（“键盘事件”）；
//警报（“键盘事件”）；
event.preventDefault（）；
}  
}

检查此处发布的答案：

它详细介绍了与处理单击/更改事件相关的所有跨浏览器问题，并介绍了鼠标事件技巧（如下所示）失败的地方

对焦是一个棘手的问题，因为一旦收音机组（所有同名收音机）对焦，箭头键将更改值，从而触发

change

事件和

click

事件，这是通过浏览器完成的，以与键盘导航兼容

一个简单但非跨浏览器的解决方案如下：

$('input[name="radioButton"]').on("click", function(e) {

    if (e.clientX === 0 && e.clientY === 0) {
        console.log("keyboard");
    } else {
        console.log("mouse");
    };
}

您好，您可以编写这个移动javascript代码到head部分

<script>
function CreateGrid() {
    var Grid = document.getElementById('Table1')
    for (var i = 1; i < 6; i++) {
        var newrow = Grid.rows[Grid.rows.length - 1].cloneNode(true);
        newrow.cells[0].innerText;
        newrow.cells[1].children[0].value = '';
        newrow.cells[2].children[0].value = '';
        Grid.getElementsByTagName('tbody')[0].appendChild(newrow);
    }
}

function Test() {
    alert("Hello");
}
</script>

<div style="width:400px">
    <table class="style1" id="Table1">
        <tr>
            <td>
                <input type="text" id="text1" />
            </td>
            <td>
                <input type="text" id="text2" />
            </td>
            <td>
                <input type="radio" id="rdbSelect" name="Select" onclick="Test()" />
            </td>
        </tr>
    </table>
</div>


函数CreateGrid（）{
var Grid=document.getElementById（'Table1'）
对于（变量i=1；i<6；i++）{
var newrow=Grid.rows[Grid.rows.length-1].cloneNode（true）；
newrow.cells[0].innerText；
newrow.cells[1]。子项[0]。值=“”；
newrow.cells[2]。子项[0]。值=“”；
Grid.getElementsByTagName（'tbody'）[0].appendChild（newrow）；
}
}
功能测试（）{
警惕（“你好”）；
}
您需要考虑Onchange事件，我想……Hy@ RayndabRe谢谢您的好感，我尝试了更改，但结果是相同的：（你能提供完整的html和JS代码吗？是的，我已经更新了我的问题，请检查你能提供JSFIDLE复制你的问题吗？因为我理解你的问题，这不是预期的行为我只希望在鼠标单击单选按钮时调用该函数，而不是在焦点上。
使用键盘设置焦点不会触发点击事件据我所知，他@mukesh，我尝试了onchange事件，但结果仍然相同。亲爱的@Shaiwal Tripathi，这段代码正在运行代码。请告诉我您使用的浏览器以及在简单html或其他格式中应用这段代码的位置。onchange的问题是，它会在每次更改时触发，包括焦点更改和单击更改。不是OP所要求的。您使用的浏览器您的代码在我的浏览器中运行得很好，没有任何问题，目前我使用的是chrome，并且也适用于IE8。请注意，这需要是onClick函数，而不是onChange；change事件对象不包括所需的属性。
<input type="radio" name="aradio" />Option one<br/>
<input type="radio" name="aradio" />Option two

$("input[name=aradio]")
    .on("click", changeEvent)
    .on("keydown", changeEvent);

function changeEvent(event){
  if(event.originalEvent.keyCode == 0){
    console.log("click event");
    //alert("click event");
  }else{
    console.log("keyboard event");
    //alert("keyboard event");
    event.preventDefault();
  }  
}

$('input[name="radioButton"]').on("click", function(e) {

    if (e.clientX === 0 && e.clientY === 0) {
        console.log("keyboard");
    } else {
        console.log("mouse");
    };
}

<script>
function CreateGrid() {
    var Grid = document.getElementById('Table1')
    for (var i = 1; i < 6; i++) {
        var newrow = Grid.rows[Grid.rows.length - 1].cloneNode(true);
        newrow.cells[0].innerText;
        newrow.cells[1].children[0].value = '';
        newrow.cells[2].children[0].value = '';
        Grid.getElementsByTagName('tbody')[0].appendChild(newrow);
    }
}

function Test() {
    alert("Hello");
}
</script>

<div style="width:400px">
    <table class="style1" id="Table1">
        <tr>
            <td>
                <input type="text" id="text1" />
            </td>
            <td>
                <input type="text" id="text2" />
            </td>
            <td>
                <input type="radio" id="rdbSelect" name="Select" onclick="Test()" />
            </td>
        </tr>
    </table>
</div>