update a set of radio values with jquery or basic javascript

Question

im pretty new to jquery and bootstrap framework. however, i was trying to use bootstrap-switch plugin to create a nice yes / no switch on a set of radiobuttons generated via mysql query (name of the radio as the id of a checkbox).

what i did is a nice table with this switch:

i did manage to change radio value to yes/no if the switch is toggled with this code:

<div class="make-switch radioswitch">
<input type="radio" checked="checked" value="yes" name="00839770708"></input>
</div>
<div class="make-switch radioswitch">
<input type="radio" value="no" name="00481821213"></input>
</div>
<div class="make-switch radioswitch">
<input type="radio" checked="checked" value="yes" name="23467894567"></input>
</div>

etc..

and the jquery javascript called is:

<script>
$('.radioswitch').on('switch-change',function(e,data){
var$el=$(data.el)
,value=data.value;
if(value==true)
{alert('value is yes');
// it sets the radio's value with "yes", but it works on a single radio with a given name
$("input[type=radio][name=00100190610]").val("yes");

}
else{alert('value is no');
// it sets the radio's value with "no", but it works on a single radio with a given name
$("input[type=radio][name=00100190610]").val("no");}

console.log(e,$el,value);
});
</script>

what i want to know is how i can pass a parameter to name selector of checked radio

or use another instruction to tell javascript " update radio value where radio name is xxx "

thanks in advance and sorry if i explained the problem bad.

JSFIDDLE EXAMPLE

Answer 1

Regarding your screenshot, what you want to use are checkbox, not radio inputs.

Radio inputs are a group of inputs related to each others, they have a common name, they share the same meaning.

Common examples:

1. "Select your method of payment": VISA, Mastercard, etc..
2. "Select your gender": Male or Female

Corresponding HTML:

<input type="radio" name="payment_type" value="visa" />
<input type="radio" name="payment_type" value="mastercard" />
...

As you can note, with radio inputs, only one value is possible (you cannot pay with VISA and Mastercard, you have to choose).

So when you select one, all the other options (of the same group) are unchecked.

This is not the case in your screenshot: you have various lines "checked" ("SI") and various others "unchecked" ("NO").

So what you want to use are checkbox, not radio, like that:

<div class="make-switch">
    3M ITALIA SPA
    <input type="checkbox" name="00839770708" value="yes" />
</div>
<div class="make-switch">
    BABINI SPA
    <input type="checkbox" name="00481821213" value="yes" checked="checked" />
</div>
<div class="make-switch">
    ARTIGLASS ARTICOLI..
    <input type="checkbox" name="23467894567" value="yes" checked="checked" />
</div>
...

Note: Of course, you have to use your bootstrap switches as checkbox (default behavior) and not anymore as radio..

And you don't need to update the value to yes or no.. After all yes correspond to "checked" and no to..

You already know that information, that state, thanks to the checkbox HMTL input (jQuery):

$('input[name=00839770708]').attr("checked") // --> returns false
$('input[name=00481821213]').attr("checked") // --> returns true
...

---

Now, to respond your original question:

"What i want to know is how i can pass a parameter to name selector?"

You can build the selector (a string..) dynamically:

var arr = ['00839770708', '00481821213', '23467894567'];
for (var i=0; i<arr.length; i++) {
    console.log( $('input[name='+arr[i]+']').attr('checked') );
}

This will output in the console:

> false
> true
> true