2012-11-04 148 views
0

当所有元素'复选框'未选中时,我需要设置一个单选按钮('no_subscribe')为true。取消选中所有这些复选框后会发生这种情况。 请原谅我,如果这已被问到别处。我是新来的JavaScript和编程一般,所以任何帮助,非常感谢!我已经能够使'订阅'按钮做我想要的,但我无法弄清楚相反的情况。这些都在一个名为“邮件程序”的表单内。我最近删除了我所做的尝试。他们没有工作,所以我很抱歉没有代码来排除故障。当所有复选框为假时检查单选按钮

<fieldset> 
Subscribe to our Mailing List? 
     <input type = "radio" name = "yes" id = "subscribe" onclick = "subscribe_to_all();" value = "yes" />Yes 
     <input type = "radio" name = "no" id = "no_subscribe" onclick = "subscribe_to_none();" value = "no" />No 
</fieldset> 

<fieldset name = "subscribe"> 
<legend>Mailing List Subscriptions</legend> 
    <input type="checkbox" id = "c1" name="subscriptions" onclick = "radio_yes();" value="CorporateEmails"/> 
    Corporate Press Release Emails<br /> 
    <input type="checkbox" id = "c2" name="subscriptions" onclick = "radio_yes();" value="SoftwareAdvertising"/> 
    Upgrade Software Advertising List<br /> 
    <input type="checkbox" id = "c3" name="subscriptions" onclick = "radio_yes();" value="PostBuyoutSpammers"/> 
    List given to spammers after buyout<br /> 
    <input type="checkbox" id = "c4" name="subscriptions" onclick = "radio_yes();" value="NonCynical"/> 
    The only non-cynical list<br /> 
    <input type="checkbox" id = "c5" name="subscriptions" onclick = "radio_yes();" value="SelltoSpammers"/> 
    List to sell to spammers<br /> 
    <input type="checkbox" id = "c6" name="subscriptions" onclick = "radio_yes();" value="SpamList"/> 
    Spam List<br /> 

外部JavaScript文件:

function subscribe_to_all() { 
    for (i = 0; i < document.mailer.subscriptions.length; i++) { 
     document.mailer.subscriptions[i].checked = true; 
    } 
} 

function subscribe_to_none() { 
    for (i = 0; i < document.mailer.subscriptions.length; i++) { 
     document.mailer.subscriptions[i].checked = false; 
    } 
} 

function radio_yes() { 
    document.getElementById("subscribe").checked = true; 
}​ 
+1

为什么你会为此使用单选按钮是/否?使用带有“订阅我们的邮件列表”标签的简单复选框会更有意义。 – Hubro

+0

单选按钮是分配所必需的。但你是对的,这确实更有意义。 – David

回答

0

我已经使用了新的功能。它没有被优化。我已经使用了一个新功能。您可以在循环中获取复选框状态。但我的代码工作。

认沽class="subscriptions"属性的所有复选框:只需复制,粘贴和查看更改

<script type="text/javascript"> 
function subscribe_to_all() { 

for (i=0;i<document.mailer.subscriptions.length;i++){ 

document.mailer.subscriptions[i].checked = true; 

} 
} 

function subscribe_to_none() { 

for (i=0;i<document.mailer.subscriptions.length;i++){ 

document.mailer.subscriptions[i].checked = false; 

} 
} 
function radio_yes() { 

document.getElementById("subscribe").checked = true; 

} 
function radio_uncheck() 
{ 


     c1=document.getElementById("c1").checked; 
     c2=document.getElementById("c2").checked; 
     c3=document.getElementById("c3").checked; 
     c4=document.getElementById("c4").checked; 
     c5=document.getElementById("c5").checked; 
     c6=document.getElementById("c6").checked; 
     console.log(c1); 
     if(c1==false && c2==false && c3==false && c4==false && c5==false && c6==false) 
     {document.getElementById("subscribe").checked=false;} 

    //document.getElementById("subscribe").checked=false; 
} 
</script> 

<fieldset> 
Subscribe to our Mailing List? 
     <input type = "radio" name = "yes" id = "subscribe" onclick = "subscribe_to_all();" value = "yes" />Yes 
     <input type = "radio" name = "no" id = "no_subscribe" onclick = "subscribe_to_none();" value = "no" />No 
</fieldset> 

<fieldset name = "subscribe"> 
<legend>Mailing List Subscriptions</legend> 
    <input type="checkbox" id = "c1" name="subscriptions" onclick = "radio_yes();radio_uncheck();" value="CorporateEmails"/> 
    Corporate Press Release Emails<br /> 
    <input type="checkbox" id = "c2" name="subscriptions" onclick = "radio_yes();radio_uncheck();" value="SoftwareAdvertising"/> 
    Upgrade Software Advertising List<br /> 
    <input type="checkbox" id = "c3" name="subscriptions" onclick = "radio_yes();radio_uncheck();" value="PostBuyoutSpammers"/> 
    List given to spammers after buyout<br /> 
    <input type="checkbox" id = "c4" name="subscriptions" onclick = "radio_yes();radio_uncheck();" value="NonCynical"/> 
    The only non-cynical list<br /> 
    <input type="checkbox" id = "c5" name="subscriptions" onclick = "radio_yes();radio_uncheck();" value="SelltoSpammers"/> 
    List to sell to spammers<br /> 
    <input type="checkbox" id = "c6" name="subscriptions" onclick = "radio_yes();radio_uncheck();" value="SpamList"/> 
    Spam List<br /> 
+0

这很好用!我在之前的尝试中错过了&&操作符的概念。现在似乎很简单! – David

1

通过使用jQuery您可以通过如下解决这个问题。

$('.subscriptions').change(function() { 
    var allUncheck = true; 
    $('.subscriptions').each(function() { 
     if ($(this).is(':checked')) allUncheck = false; 
    }); 
    if (allUncheck == true) { 
     $('#no_subscribe').attr('checked', 'true'); 
    } else { 
     $('#no_subscribe').attr('checked', false); 
    } 
});​ 
0

这可以用jquery解决。第一个字段集中的单选按钮应该具有相同的名称值......我已经在您的代码中尝试了这一点。只是检查出来。我为字段添加了一个id'搜索'...

$(function() { 
$('#search input:checkbox').click(function() { 
    var classes = $('#search input:checkbox:checked'); 
    if(classes.length == 0) 
    { 
     $('input:radio[name=no]:nth(1)').attr('checked',true); 
    } 
    else 
    { 
     $('input:radio[name=no]:nth(1)').attr('checked',false); 
    }    
}); 
}); 

这是工作小提琴。 http://jsfiddle.net/NBCX8/4/

+0

谢谢塞尔瓦。我还没有开始使用jQuery,但他似乎是一个有效的解决方案! – David

相关问题