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

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

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

and the javascript function is

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 bees checked.

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.

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" ).

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

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.

How to achieve the goals/

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

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

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

and the javascript function is

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 bees checked.

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.

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" ).

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

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.

How to achieve the goals/

• javascript
• jquery
• html

• trying to accept satisfactory answers. args contains the name of radio button group so that from within the javascript function i can create a cookie with the name of args and a value equal to 1. – Istiaque Ahmed Commented Nov 18, 2011 at 9:31
• do you want to control change event with "test_check(args);" am i right ? i mean when try to checked it you need to call test_check(args); function? – erimerturk Commented Nov 18, 2011 at 9:33
• @erimerturk , when the page is loading, checked="test_check(args)" will trigger the javascript function. If the return value of the function is true, radion button will be checked, if return value is false, it won't be checked. If assigning a js function to 'checked' property is not the expected way, what should be the way? – Istiaque Ahmed Commented Nov 18, 2011 at 9:39

7 Answers 7

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

The checked attribute 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.

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

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

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

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

Here's a fiddle to show what I mean more clearly

check this output, valid args is 'aa'.

http://jsfiddle/X7rcC/1

html:

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

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

}

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

<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);
    }
});

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

.

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

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

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

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");" />