Question

我有以下两种形式：

  <div class="pricing-details pricing-details-downloads">
    <h4>Single purchase (60 lessons)</h4>
    <h4>Bulk Purchase: Lesson</h4>
    <div class="pricing-details-separator"></div>
    <form action="">
      <input type="checkbox" name="vehicle" value="Bike">Lesson Audio / <span class="pricing-box-price">$19.95 USD</span><br>
      <input type="checkbox" name="vehicle" value="Bike">Lesson PDFs / <span class="pricing-box-price">$19.95 USD</span><br>
      <input type="checkbox" name="vehicle" value="Bike">Review Audio / <span class="pricing-box-price">$19.95 USD</span><br>
    </form>
    <form class="pricing-last-form" action="">
      <input type="radio" name="sex" value="male"><strong>Single Level Download $49.95:</strong> Choose a single level (1 to 7) and receive access to all lessons, PDFs and review audio for that level, plus 30 days of online access ($80 value). Email us your level choice after purchase.<br>
      <input type="radio" name="sex" value="male"><strong>3 Level Download $99.95:</strong> Choose any 3 levels (1 to 7) and receive access to all lessons, PDFs and review audio for those levels, plus 60 days of online access ($190 value). Email us your level choices after purchase.<br>
      <input type="radio" name="sex" value="male"><strong>All Access Package $199.9:</strong> Receive access to all lessons, PDFs and review audio for all 7 levels, plus 90 days of online access ($300 value).<br>
    </form>
  </div>

如果选中任何单选框，我希望取消选中所有复选框，如果选中任何复选框，我希望取消选中所选单选框。

实现这一目标的最简单方法是什么？

Answer 1

喜欢这个？：

$('[name="sex"]').on('change', function(){ // if your jquery version doesn't support on then use .change
      $('[name="vehicle"]').prop('checked', false);
});
$('[name="vehicle"]').on('change', function(){
      $('[name="sex"]').prop('checked', false);
});

<强> Fiddle

或者只是将它们结合起来。

$('[name="sex"], [name="vehicle"]').on('change', function(){ //or target ':checkbox, :radio'
    var other = this.name =="vehicle" ? "sex" : "vehicle";
     $('[name='+other + ']').prop('checked', false);
});

Answer 2

$('input[type=radio]').change(function(){
    if($('input[type=radio]:checked').length > 0)
        $('input[type=checkbox]').removeAttr('checked');
});

$('input[type=checkbox]').change(function(){
    if($('input[type=checkbox]:checked').length > 0)
        $('input[type=radio]').removeAttr('checked');
});

Answer 3

尝试

var $checks = $('input[name="vehicle"]').change(function(){
    if(this.checked){
        $rsdios.prop('checked', false)
    }
})
var $rsdios = $('input[name="sex"]').change(function(){
    if(this.checked){
        $checks.prop('checked', false)
    }
})

演示：Fiddle

Answer 4

我已修改您的HTML，如下所示，为复选框和单选按钮添加取消选中事件

<form action="">
            <input type="checkbox" onclick="Uncheck(this, 'sex')" name="vehicle" value="Bike"/>Lesson Audio / <span class="pricing-box-price">$19.95 USD</span>
            <br/>
            <input type="checkbox" onclick="Uncheck(this, 'sex')" name="vehicle" value="Bike"/>Lesson PDFs / <span class="pricing-box-price">$19.95 USD</span>
            <br/>
            <input type="checkbox" onclick="Uncheck(this, 'sex')" name="vehicle" value="Bike"/>Review Audio / <span class="pricing-box-price">$19.95 USD</span>
            <br/>
        </form>
        <form class="pricing-last-form" action="">
            <input type="radio" onclick="Uncheck(this, 'vehicle')" name="sex" value="male"/><strong>Single Level Download $49.95:</strong> Choose a single level (1 to 7) and receive access to all lessons, PDFs and review audio for that level, plus 30 days of online access ($80 value). Email us your level choice after purchase.
            <br/>
            <input type="radio" onclick="Uncheck(this, 'vehicle')" name="sex" value="male"/><strong>3 Level Download $99.95:</strong> Choose any 3 levels (1 to 7) and receive access to all lessons, PDFs and review audio for those levels, plus 60 days of online access ($190 value). Email us your level choices after purchase.
            <br/>
            <input type="radio" onclick="Uncheck(this, 'vehicle')" name="sex" value="male"/><strong>All Access Package $199.9:</strong> Receive access to all lessons, PDFs and review audio for all 7 levels, plus 90 days of online access ($300 value).
            <br/>
        </form>

在脚本中添加以下方法

功能取消选中（obj，name）{

        if (obj.type == 'checkbox') {
            $('input:radio[name=' + name + ']').each(function () {

                $(this).attr('checked', false);
            });

        } else if (obj.type == 'radio') {
            $('input:checkbox[name=' + name + ']').each(function () {

                $(this).attr('checked', false);
            });
        }
    }

如果选中了单选框，则取消选中复选框，反之亦然？

4 个答案: