Javascript 如何使用单选按钮？

您好，我有两个单选按钮plan a，plane b和i ant，当我点击plane a时，选中android应用程序、web应用程序和texbox智能卡启用复选框，如果我点击plane b，则应选中所有复选框并启用所有文本框

    <p class="contact">
<input type="radio" name="PlanA"id="PlanA"value="A"><label for="PlanA"><span style="font-weight:bold">PlanA</span></label><br>
<input name="PlanA" type="hidden" value=0 />
</p>

<p class="contact">
<input type="radio" name="PlanB"id="PlanB"value="B"><label for="PlanB"><span style="font-weight:bold">PlanB</span></label><br>
<input name="PlanB" type="hidden" value=0 />
</p>

<p class="contact">
 <input type="checkbox" name="AndroidApps" id="smartphone" value=1><label for="AndroidApps"><span style="font-weight:bold">AndroidApps</span></label><br>
 <input name="AndroidApps" type="hidden" value=0 />
</p>

<p class="contact">
<input type="checkbox" name="WebApps" id="mobweb" value=1><label for="WebApps"><span style="font-weight:bold">WebApps</span></label><br>
<input name="WebApps" type="hidden" value=0 />
            </p>

<p class="contact"><label for="SmartCard"><span style="font-weight:bold">SmartCard</span></label>
<input type="text" name="SmartCard"id="scard"disabled="disabled" required size="45"  >
</p>

<p class="contact"><label for="comment"><span style="font-weight:bold">EmailService</span></label>
<input type=email name="emailid"id="emailid"disabled="disabled" required size="45"  >
</p>

<p class="contact"><label for="comment"><span style="font-weight:bold">SmsService</span></label>

<input type=tel name="mobnum"id="mobnum"disabled="disabled"  required onKeyUp="isValidChar(this.value);" size="45">
</p>

我怎样才能做到这一点

---

提前感谢

您案例中所有单选按钮的

'name'属性

应该相同，但

id

可以不同。所有具有相同名称的收音机都位于一个名为radio group的组中。他们会按照他们的要求工作。

首先，你必须用相同的名称对收音机进行分组

试试这个：

$(document).ready(function(){
   $('.contact').on('change', ':radio', function(e) {
     if(this.id === "PlanA"){
       $("#mobweb,#smartphone,#smartcard").prop("checked", this.checked);
       $("#scard").prop("disabled", !this.checked);
     } else if(this.id === "PlanB"){
       $(':checkebox').prop("checked", this.checked);
       $('[type=text], [type=email], [type=tel]').prop("disabled", !this.checked);
     }
   });
 });

试试这个：

$(document).ready(function(){
    $('#PlanA').on('change',function(e) {
        $('input:radio').not(this).attr('checked',false);
       $("#mobweb,#smartphone,#smartcard").prop("checked",this.checked);
        $("#emailid").prop("disabled", $(this).is(':checked'));
        $("#mobnum").prop("disabled", $(this).is(':checked'));
         $("#scard").prop("disabled", !$(this).is(':checked'));
    });

    $('#PlanB').on('change',function(e) {
      $('input:radio').not(this).attr('checked',false); $("#mobweb,#smartphone,#smartcard,#email,#sms").prop("checked",this.checked);
        $("#emailid").prop("disabled", !$(this).is(':checked'));
        $("#mobnum").prop("disabled", !$(this).is(':checked'));
          $("#scard").prop("disabled", !$(this).is(':checked'));
    });
});

---

检查JSFIDLE，以下内容将有助于了解实际情况

---

jsfiddle.net/rohanppatil/TTknF/8/

您的javascript代码？想知道我尝试时你尝试了什么吗？如果我单击任何一个单选按钮，它工作正常，然后如果我单击另一个按钮，它不会从最后一个按钮取消单击。你的单选按钮没有链接，因此它不知道所选的按钮是否应该取消单击。此外，您的代码将无法工作，因为名称和id之间缺少空格。

$(document).ready(function(){
    $('#PlanA').on('change',function(e) {
        $('input:radio').not(this).attr('checked',false);
       $("#mobweb,#smartphone,#smartcard").prop("checked",this.checked);
        $("#emailid").prop("disabled", $(this).is(':checked'));
        $("#mobnum").prop("disabled", $(this).is(':checked'));
         $("#scard").prop("disabled", !$(this).is(':checked'));
    });

    $('#PlanB').on('change',function(e) {
      $('input:radio').not(this).attr('checked',false); $("#mobweb,#smartphone,#smartcard,#email,#sms").prop("checked",this.checked);
        $("#emailid").prop("disabled", !$(this).is(':checked'));
        $("#mobnum").prop("disabled", !$(this).is(':checked'));
          $("#scard").prop("disabled", !$(this).is(':checked'));
    });
});