Question

我试图在onload中显示和隐藏jquery，但它没有显示可以看一眼，并提供解决方案。我刚刚完成点击单选按钮列表框想要显示..任何想法

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(window).load = function () {
  $("#main input[name='B']").click(function () {
    alert("hiiii");
    if ($('input[name=B]:checked').val() == "country") {
      alert("country");


      $("#country").show();
      $("#state,#city").hide();

    }
    if ($('input[name=B]:checked').val() == "state") {
      alert("state");

      $("#state").show();
      $("#country,#city").hide();

    }
    if ($('input[name=B]:checked').val() == "city") {
      alert("city");

      $("#city").show();
      $("#country,#state").hide();

    }
  });
</script>

</head>

<body>
  <table cellpadding="0" cellspacing="0" border="2">
    <tr>
      <td>
        <input type="radio" name="B" value="country">
      </td>
      <td>Country</td>
      <td>
        <input type="radio" name="B" value="state">
      </td>
      <td>State</td>
      <td>
        <input type="radio" name="B" value="city">
      </td>
      <td>City</td>

    </tr>
  </table>

  Productline:
  <select id="productline">
    <option value="Motorcycles">Motorcycles</option>
    <option value="Planes">Planes</option>
    <option value="Ships">Ships</option>
    <option value="Trains">Trains</option>
  </select>
  <select id="country">
    <option value="Australia">Australia</option>
    <option value="Austria">Austria</option>
    <option value="Belgium">Belgium</option>
    <option value="Canada">Canada</option>
    <option value="Denmark">Denmark</option>
    <option value="Finland">Finland</option>
    <option value="France">France</option>
    <option value="Germany">Germany</option>
  </select>

  <select id="state">
    <option value="BC">BC</option>
    <option value="CA">CA</option>
    <option value="CT">CT</option>
    <option value="Isle&#32;of&#32;Wight">Isle&#32;of&#32;Wight</option>
    <option value="MA">MA</option>
    <option value="NH">NH</option>
    <option value="NJ">NJ</option>
    <option value="NSW">NSW</option>
    <option value="NV">NV</option>
  </select>
  <select id="city">
    <option value="Allentown">Allentown</option>
    <option value="Århus">Århus</option>
    <option value="Auckland&#32;&#32;">Auckland&#32;&#32;</option>
    <option value="Barcelona">Barcelona</option>
    <option value="Bergamo">Bergamo</option>
    <option value="Bergen">Bergen</option>
    <option value="Boston">Boston</option>
    <option value="Bräcke">Bräcke</option>
    <option value="Brickhaven">Brickhaven</option>
    <option value="Bridgewater">Bridgewater</option>
    <option value="Brisbane">Brisbane</option>
    <option value="Bruxelles">Bruxelles</option>
  </select>

</body>

Answer 1

这是一种错误的语法：

$(window).load =function()

正确的是：

$(window).load(function()

但我的建议是在$(function(){});文件准备就绪时使用它。

所以你可以试试这个：

在您的表格中添加一个ID #main：

<table cellpadding="0" cellspacing="0" border="2" id="main">
   //-------------------------------here----------^^^^^^^^

$(function(){ // <----document ready function shorter version
    $("#main :radio").on('change', function(){ // <---apply change event
        $('#'+this.value).show(); //<---show the target
        if($(e.target).val() == 'country'){
           $('#'+this.value).siblings('select:not(#productline)').hide(); 
        } //--^----------------------------------^hide only if country is checked
    });
});

根据 kenshin.thebattosai 建议的评论

Updated Demo @ Fiddle

Answer 2

您没有#main元素
$(window).load =function() {应为$(window).load(function() {
你错过了});

http://jsbin.com/sekuzice/1/edit

Answer 3

更新

$（window）.load to window.onload

并为表格提供您已分配的id属性

Answer 4

尝试这样的事情

 $(window).load(function(){
    $("input[name=B]").change(function(){
     if($('input[name=B]:checked').val()=="country")
     {
            alert("country");


            $("#country").show();
            $("#state,#city").hide();

     }
     if($('input[name=B]:checked').val()=="state")
     {
            alert("state");

            $("#state").show();
            $("#country,#city").hide();

     }
     if($('input[name=B]:checked').val()=="city")
     {
            alert("city");
            $("#city").show();
            $("#country,#state").hide();
     }
});
});

您没有#main元素
$（window）.load = function（）{应该是$（window）.load（function（）{
使用$（document）.ready（function（）{而不是$（window）.load（function（）{

替代解决方案

尝试简化您的代码

$(window).load(function(){
    $("input[name=B]").change(function(){
        var elem = "#" + $('input[name=B]:checked').val();
        if($(elem).length){
            $("#country,#state,#city").hide();
            $(elem).show();
        }
    });
});

Answer 5

试试这个：

$( document ).ready(function(e) {
    $("input[name=B]").click(function () {
        if ($('input[name=B]').is(':checked')) {
            var val =   $('input[name=B]:checked').val();
            switch(val){
                case "country":
                alert("country");
                $("#country").show();
                $("#state,#city").hide();
                break;

                case "state":
                alert("state");         
                $("#state").show();
                $("#country,#city").hide();
                break;

                case "city":
                alert("city");          
                $("#city").show();
                $("#country,#state").hide();
                break;
            }
        }
    });
});

Answer 6

你错过了jQuery的强大功能，让事情变得复杂。

您只需将输入名称更改为location，将data-choose="location"属性添加到需要显示或隐藏的select元素，具体取决于广播并编写更简单有效的代码< strong>没有硬编码任何，如“州”，“城市”或“国家”字符串。

请参阅this。

这将是您需要的所有jQuery：

$(function () {
    $('[data-choose="location"]').hide();
    $('[name="location"]').change(function () {
        $('[data-choose="location"]').hide();
        $('#'+$(this).val()).show();
    });
})

修改在 Jai 的建议下将.click更改为.change。

在jquery中显示和隐藏

6 个答案:

Updated Demo @ Fiddle