使用javascript在单选按钮列表上调用onclick

vyswwuz2  于 2023-02-21  发布在  Java
关注(0)|答案(7)|浏览(181)

如何使用javascript调用onclick的单选按钮列表?

nimxete2

nimxete21#

如何生成单选按钮列表?如果只使用HTML:

<input type="radio" onclick="alert('hello');"/>

如果你是通过ASP.NET之类的工具生成的,你可以把它作为属性添加到列表中的每个元素,你可以在填充列表后运行它,或者如果你一个接一个地构建列表,可以内联它:

foreach(ListItem RadioButton in RadioButtons){
    RadioButton.Attributes.Add("onclick", "alert('hello');");
}

更多信息:http://www.w3schools.com/jsref/event_onclick.asp

pxiryf3j

pxiryf3j2#

要在单选按钮上触发onClick事件,请在其DOM元素上调用click()方法:

document.getElementById("radioButton").click()

使用jQuery:

$("#radioButton").click()

Angular :

angular.element('#radioButton').trigger('click')
4dbbbstv

4dbbbstv3#

我同意@annakata的观点,这个问题需要进一步澄清,但这里有一个非常基本的示例,说明如何为单选按钮设置onclick事件处理程序:

window.onload = function() {
  var ex1 = document.getElementById('example1');
  var ex2 = document.getElementById('example2');
  var ex3 = document.getElementById('example3');

  ex1.onclick = handler;
  ex2.onclick = handler;
  ex3.onclick = handler;
}

function handler() {
  alert('clicked');
}
<input type="radio" name="example1" id="example1" value="Example 1" />
<label for="example1">Example 1</label>
<input type="radio" name="example2" id="example2" value="Example 2" />
<label for="example1">Example 2</label>
<input type="radio" name="example3" id="example3" value="Example 3" />
<label for="example1">Example 3</label>
ccgok5k5

ccgok5k54#

这里的问题是,RadioButtonList的呈现将单个单选按钮(ListItems) Package 在span标记中,即使您直接使用Attributes将客户端事件处理程序分配给列表项,它也会将事件分配给span。将事件分配给RadioButtonList会将其分配给呈现它的表。
这里的技巧是在aspx页面上添加ListItems,而不是从后面的代码中添加,然后可以将JavaScript函数赋给onClick属性。attaching client-side event handler to radio button list by Juri Strumpflohner解释了这一切。
这仅在您提前知道ListItems时有效,并且对于需要使用后台代码动态添加RadioButtonList中的项的位置没有帮助。

qkf9rpyu

qkf9rpyu5#

我认为以上所有方法都可行。如果您需要的是简单的,我使用:

function checkRadio(name) {
  if (name == "one") {
    console.log("Choice: ", name);
    document.getElementById("one-variable-equations").checked = true;
    document.getElementById("multiple-variable-equations").checked = false;

  } else if (name == "multiple") {
    console.log("Choice: ", name);
    document.getElementById("multiple-variable-equations").checked = true;
    document.getElementById("one-variable-equations").checked = false;
  }
}
<div class="radio-buttons-choice" id="container-3-radio-buttons-choice">
  <input type="radio" name="one" id="one-variable-equations" onclick="checkRadio(name)"><label>Only one</label><br>
  <input type="radio" name="multiple" id="multiple-variable-equations" onclick="checkRadio(name)"><label>I have multiple</label>
</div>
rsaldnfx

rsaldnfx6#

尝试以下解决方案

$(document).ready(function() {
  $('.radio').click(function() {
    document.getElementById('price').innerHTML = $(this).val();
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="variant">
  <label><input type="radio" name="toggle" class="radio" value="19,99€"><span>A</span></label>
  <label><input type="radio" name="toggle" class="radio" value="<<<"><span>B</span></label>
  <label><input type="radio" name="toggle" class="radio" value="xxx"><span>C</span></label>
  <p id="price"></p>
</div>
gorkyyrv

gorkyyrv7#

其他答案对我不起作用,所以我检查了Telerik's official documentation,它说你需要找到按钮并调用click()函数:

function KeyPressed(sender, eventArgs) {
  var button = $find("<%= RadButton1.ClientID %>");
  button.click();
}

相关问题