Премахнете отметката от всички бутони за избор, когато се щракне върху някой от тях

Следващият HTML показва радио бутоните, а DIV по-долу показва съдържанието, което ще се появи според функцията за щракване на всеки радио бутон

  <ul>
     <li id="6"><input type="radio" name="sell" value="sell" id="sell" />Sell</li>
     <li id="7"><input type="radio" name="rent" value="rent" id="rent" />Rent</li>
 <li id="8"><input type="radio" name="donate" value="donate" id="donate" />Donate</li>
</ul>


   <div id="selltab">                           
        eeeeeeeee
   </div>
    <div id="renttab">
         ffffffffff
  </div>
     <div id="donatetab">
         ggggggggg
    </div>

Функцията на javascript, показана по-долу, работи правилно и скрива съдържанието, когато щракнете върху други радио бутони. Но проблемът е, че всички радио бутони се показват като избрани, дори ако друго съдържание в div не е избрано тогава....

Трябва да премахнете отметката от оставащите 2 бутона за избор, когато е избран някой от тях, възможно ли е

   $(document).ready(function(){
    $('#selltab').hide();
    $('#renttab').hide();
    $('#donatetab').hide();

       $('input[name=sell]').click(function(){
     $('#selltab').toggle();
         $('#renttab').hide();
     $('#donatetab').hide();
      $('rent').checked = false;
     $('donate').checked = false;
       })

   $('input[name=rent]').click(function(){
    $('#renttab').toggle();
$('#selltab').hide();
    $('#donatetab').hide();
$('sell').checked = false;
       $('donate').checked = false;
    })

    $('input[name=donate]').click(function(){
       $('#donatetab').toggle();
 $('#selltab').hide();
    $('#renttab').hide();
$('rent').checked = false;
     $('sell').checked = false;
   })

});

javascript javascript-events
person Nabe    schedule 07.05.2012    source източник

Отговори (3)


arrow_upward
2
arrow_downward

Да, разбира се. можете да го направите по два начина

Първият е, че можете лесно просто да направите групата (със същото име) радио бутона, както следва:

<ul>
 <li id="6"><input type="radio" name="r1" value="sell" id="sell" />Sell</li>
 <li id="7"><input type="radio" name="r1" value="rent" id="rent" />Rent</li>
 <li id="8"><input type="radio" name="r1" value="donate" id="donate" />Donate</li>
</ul>

$(document).ready(function(){
    $('#selltab').hide();
    $('#renttab').hide();
    $('#donatetab').hide();

    $('input[id=sell]').click(function(){
    $('#selltab').toggle();
    $('#renttab').hide();
    $('#donatetab').hide();
    })

    $('input[id=rent]').click(function(){
    $('#renttab').toggle();
    $('#selltab').hide();
    $('#donatetab').hide();
    })

    $('input[id=donate]').click(function(){
    $('#donatetab').toggle();
    $('#selltab').hide();
    $('#renttab').hide();
   })
});

И вторият използва друга функция на JavaScript, за да реши проблема ви, както следва:

<ul>
 <li id="6"><input type="radio" name="sell" value="sell" id="sell" onClick="checkedRadioButton(this);"/>Sell</li>
 <li id="7"><input type="radio" name="rent" value="rent" id="rent" onClick="checkedRadioButton(this);"/>Rent</li>
 <li id="8"><input type="radio" name="donate" value="donate" id="donate" onClick="checkedRadioButton(this);"/>Donate</li>
</ul>


function checkedRadioButton(obj){
    var id = obj.name.substring(obj.name.lastIndexOf(':'));
    var el = obj.form.elements;
    for (var i = 0; i < el.length; i++) {
        if (el[i].name.substring(el[i].name.lastIndexOf(':')) == id) {
            el[i].checked = false;
        }
    }
    obj.checked = true;
}
person AKZap    schedule 07.05.2012

arrow_upward
0
arrow_downward

Това, което всъщност бихте направили в този случай, е всички радио бутони да имат едно и също име. Поведението по подразбиране за радио бутоните е, че само един от групата може да бъде избран едновременно. Вместо достъп до тях чрез използване

$('input[name=theName]')

сякаш го правите в момента, просто влезте в тях, като използвате

$('#theInputIdHere')

тъй като вече сте им дали идентификатори. С това няма да имате проблеми да премахнете отметката от някой от бутоните за избор, тъй като по подразбиране винаги ще бъде избран само един.

person Johannes Lumpe    schedule 07.05.2012

arrow_upward
0
arrow_downward

Опитайте да смените вашия $('rent').checked = false;

с $("#rent").attr("checked", false);

и подобни за другите 2, където е необходимо.

Искате да получите достъп до него чрез ID, така че използвайте #

person Jeames Bone    schedule 07.05.2012