使用复选框条件激活单选按钮 [英] Activate radio buttons using checkbox conditions

问题描述

基本上，我想根据以下条件使用复选框激活单选按钮 -

Basically i'd like to activate radio buttons using a checkbox as per the conditions given below-

1. 复选框，第一个收音机将被检查。

1. If i check the checkbox, the first radio would be checked. If i change to another radio button, the checkbox still checked.

如果我取消选中该复选框，我想取消选中任何单选按钮。我的意思是，如果选中复选框，则需要检查单选按钮，如果未选中此复选框，则也需要取消选中单选按钮。

If i uncheck the checkbox, I would like to uncheck any radio button. I mean, the radio buttons need to be checked if the checkbox is checked, and if the checkbox is unchecked, the radio buttons need to be unchecked as well.

我试过一些部分解决方案，但没有一个能正常工作。 ：（

I've tried a bunch of partial solutions, but none of them work correctly. :(

我的HTML：

<input name="featured_ad" value="1" type="checkbox">condition
<br><br>
<input type="radio" name="ad_pack_id" value="497649">value 1<br>
<input type="radio" name="ad_pack_id" value="497648">value 2<br>
<input type="radio" name="ad_pack_id" value="497647">value 3<br>

>

推荐答案

这里是使用纯javascript的示例。

Here is an example using pure javascript.

小提琴： http://jsfiddle.net/3bugg14y/1/

HTML：

<input name="featured_ad" value="1" type="checkbox" onclick="resetradio(this)">condition
<br><br>
<input type="radio" name="ad_pack_id" value="497649" onclick="setcheckbox()">value 1<br>
<input type="radio" name="ad_pack_id" value="497648" onclick="setcheckbox()">value 2<br>
<input type="radio" name="ad_pack_id" value="497647" onclick="setcheckbox()">value 3<br>

JS：

function resetradio (checkbox) {
    var radios = document.getElementsByName('ad_pack_id');
    var index = 0, length = radios.length;
    if (checkbox.checked == false) {
        for ( ; index < length; index++) {
            radios[index].checked = false;
        }
    }
    else {
        radios[index].checked = true;
    }
}

function setcheckbox () {
    var checkbox = document.getElementsByName('featured_ad')[0];
    if (checkbox.checked == false) {
        checkbox.checked = true;
    }
}

这篇关于使用复选框条件激活单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！