如何在单选按钮的“已检查”属性上调用 javascript 函数?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/8180139/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-24 04:59:36  来源:igfitidea点击:

how to call a javascript function on radio button's 'checked' property?

javascriptjqueryhtml

提问by Istiaque Ahmed

I have N number of radio button groups in the page with auto generated names.

我在页面中有 N 个单选按钮组,带有自动生成的名称。

I want to call a javascript function as the value of the checked property. THIS LINE EXCLUDED AFTER EDIT( Depending on the return value, the radio button needs to be checked or unchecked.)

我想调用一个javascript函数作为checked属性的值。 编辑后排除此行(根据返回值,需要选中或取消选中单选按钮。)

<input type="radio" name="auto_generated_name" value="some_value" checked="test_check(args);" />

and the javascript function is

和 javascript 函数是

function test_check(params) {
    if(conditions){
        return true;
    }
    else 
        return false;    
}

But that does not work. Whatever value I assign to 'checked' property, be it any javascript function or any string etc, the radio button becomes checked.

但这不起作用。无论我分配给“已检查”属性的任何值,无论是任何 javascript 函数还是任何字符串等,单选按钮都会被选中。

How can I achieve my goal?

我怎样才能实现我的目标?

EDIT:

编辑:

 <input type="radio" name="auto_generated_name" value="somevalue" onclick="test_check(args)"/>

4 radio buttons make a group. such N radio groups have html class names in this way : button_group_1, button_group_2, button_group_3, button_group_4 etc.

4 个单选按钮组成一个组。这样的 N 个无线电组以这种方式具有 html 类名称:button_group_1、button_group_2、button_group_3、button_group_4 等。

The 'args' need to be these class (i.e. radio button group) names and the corresponding values (from value="1", value="2", value="3" and value="4" ).

'args' 需要是这些类(即单选按钮组)名称和相应的值(来自 value="1", value="2", value="3" 和 value="4" )。

Cookies with the class names and values will be created inside the javascript function.

带有类名和值的 cookie 将在 javascript 函数中创建。

On page refresh, cookies matching with the class names will be checked and depending on the existence of the corresponding cookies, the radio button will be checked or unchecked.

在页面刷新时,将检查与类名称匹配的 cookie,并根据相应 cookie 的存在,选中或取消选中单选按钮。

How to achieve the goals/

如何实现目标/

回答by pradeek

Assuming you are using jQuery, use the change event: http://api.jquery.com/change/

假设您使用的是 jQuery,请使用更改事件:http: //api.jquery.com/change/

回答by Rory McCrossan

The checkedattribute is simply a boolean value to indicate whether the radio button should be checked, it cannot contain script, or a reference to a scripting function. Any value in the attribute will cause the radio button to be checked.

checked属性只是一个布尔值,用于指示是否应检查单选按钮、它不能包含脚本或对脚本函数的引用。属性中的任何值都会导致单选按钮被选中。

Without knowing what mechanism you are using to check each radio button - I can see an argsvariable but don't know what type this is - it's going to be tricky to write some code for you.

不知道您使用什么机制来检查每个单选按钮 - 我可以看到一个args变量,但不知道这是什么类型 - 为您编写一些代码会很棘手。

If you can make argsinto an array of values, then something along the lines of the following should work for you:

如果您可以制作args一个值数组,那么以下内容应该适合您:

var args = new Array(true,false,true)

$.each(args, function(index, value) {
    $("INPUT[type=radio]").eq(index).attr("checked", value)
});

Here's a fiddleto show what I mean more clearly

这是一个小提琴,可以更清楚地表明我的意思

回答by erimerturk

check this output, valid args is 'aa'.

检查这个输出,有效的参数是'aa'。

http://jsfiddle.net/X7rcC/1

http://jsfiddle.net/X7rcC/1

html:

html:

<input type="radio" name="auto_generated_name" value="some_value1" checked="bb" />

js:

js:

$(function() {
    var radios = $("input[type='radio']");
    $.each(radios, function(index, value){
        var args = value.attributes[1].nodeValue;
       test_check(args, value);
    })

});

function test_check(params, value){

    if(params == "aa"){
     $(value).attr("checked",true);
    }else
     $(value).attr("checked",false);

}

回答by Tessmore

You cannot use a checkedattribute this way, because anything as the value will be the same as checked=trueEven just checkedchecks a radio button. What you should do is use a custom attribute which will create the checked attribute:

您不能以checked这种方式使用属性,因为作为值的任何内容都将与checked=trueEven 只是checked检查单选按钮相同。您应该做的是使用自定义属性来创建已检查的属性:

<input type="radio" name="auto_generated_name" value="some_value" needs_check="param">

<script>
  // Do test_check on param for each input
  $('input:radio').each(function()
  {
    var radio = $(this);
    var param = radio.attr('needs_check');

    var condition = test_check(param);

    radio.attr('checked', condition);    
  });

  function test_check(param)
  {
    return true or false based on param
  }
</script>

回答by Dexter

Your question really boils down to:

你的问题实际上归结为:

How can I set the value of a checkbox when the page first loads? (Using a parameter stored with the checkbox)

如何在页面首次加载时设置复选框的值?(使用与复选框一起存储的参数)

The key insights are:

主要见解是:

  • you can't store a function inside a parameter and expect it to automatically evaluate on load
  • you can store the data about an object inside data-properties
  • you can set the value of objects on page load in jQuery using the $(document).ready() event
  • 您不能将函数存储在参数中并期望它在加载时自动评估
  • 您可以在data-属性中存储有关对象的数据
  • 您可以使用 $(document).ready() 事件在 jQuery 中设置页面加载对象的值

.

.

<script type="text/javascript">
$(document).ready( function() {                    // this code runs when the page is first loaded
   var radios = $("input[type='radio']");          // find all of your radio buttons
    $.each(radios, function(){
       var radio = $(this);
       var param = radio.attr('data-param');       // retrieve the param from the object
       radio.attr('checked', test_check(param) );  // set the value of the radio button
    })
});

function test_check(params) {
    if(conditions){
        return 'checked';
    }
    else 
        return '';    
}
</script>

回答by Vikash Yadav

I was facing same problem and my conclusion is that don't use " " to contain a function.

我遇到了同样的问题,我的结论是不要使用“”来包含函数。

Correct:

正确的:

<input type="radio" name="im" id="b1" onclick=alert("hello"); />

Incorrect:

不正确:

<input type="radio" name="im" id="b1" onclick="alert("hello");" />

回答by thecodeparadox

try this: Here I user a custom attribute to inputnamed groupname. In OP's case groupname="<?php echo $radio_button_group_name; ?>". Then checking the value of this attribute OP can assign checkedattribute value.

试试这个:这里我使用一个自定义属性来input命名groupname。在 OP 的情况下groupname="<?php echo $radio_button_group_name; ?>"。然后检查该属性OP的值可以分配checked属性值。

<input type="radio" name="r1" groupname="gr1"/>
<input type="radio" name="r2" groupname="gr2"/>

$('input:radio').each(function() {
    if ($(this).attr('groupname') == 'gr1') {
        $(this).attr('checked', true);
    } else {
        $(this).attr('checked', false);
    }
});