0

次の 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;
   })

});
4

3 に答える 3

2

はい、そうです。あなたは2つの方法でそれを行うことができます

最初の 1 つは、次のように簡単にグループ (同じ名前を設定) をラジオ ボタンにすることができることです。

<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();
   })
});

そして2つ目は、次のように別の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;
}
于 2012-05-07T06:34:17.677 に答える
0

この場合、実際に行うことは、すべてのラジオ ボタンに同じ名前を付けることです。ラジオ ボタンのデフォルトの動作では、同時に選択できるグループは 1 つだけです。を使用してアクセスする代わりに

$('input[name=theName]')

今行っているように、次を使用してアクセスするだけです

$('#theInputIdHere')

あなたはすでに彼らにIDを与えたので。これにより、デフォルトでは常に 1 つだけが選択されるため、ラジオボタンのチェックを外すのに問題はありません。

于 2012-05-07T06:31:58.940 に答える
0

交換してみてください$('rent').checked = false;

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

必要に応じて、他の 2 つについても同様です。

IDでアクセスしたいので #

于 2012-05-07T06:32:11.003 に答える