2013-09-25 2 views
-2

У меня есть эти две форм:Снимите галочку, если выбран радиоканал и наоборот?

<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> 

Я хочу, чтобы все флажки, чтобы быть сняты, если выбран какой-либо ящик радио, и я хочу, выбранное радио ЯЩИКА невыбранных если флажок установлен.

Каков самый простой способ выполнить это?

ответ

1

Попробуйте

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

+1

'Click' не является хорошим событием, потому что вы также можете перемещаться с клавиатуры и нажимать' Space' .. . –

+0

@FlashThunder yes .... изменено на событие 'change' –

1
$('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'); 
}); 
+0

У меня нет метода замены? – alexchenco

+0

@alexchenco: 'change()' –

2

Нравится? :

$('[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); 
}); 
+0

Спасибо, но есть ли другой способ без таргетинга на имя? Это может измениться. – alexchenco

+0

Целевое: радио и: checkbox – PSL

+0

@alexchenco как это без целевого имени, http://jsfiddle.net/BV5c2/ – PSL

0

Я изменил ваш 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> 

И в скрипте добавить метод ниже

Функция Снять отметку (объект, имя) {

 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); 
      }); 
     } 
    } 
Смежные вопросы