Question

如何在单击单选按钮时显示垂直线？我尝试了一些代码，但似乎没有用。

  </<script type="text/javascript">
    $(document).ready(function() {
      $('input:radio[name=angle]').change(function() {
        if (this.value == 'Horizontal')

        else if (this.value == 'Vertical')
        }
      });
    });
  </script>
</head>
<body>

  <h1>Grade me in chrome</h1>

  <input type="radio" name="angle" id=shapeh checked="checked" value="Horizontal">Horizontal

  <div class="parent-item">
    <div id="knob"></div>
  </div>

  <input type="radio" name="angle" id=shapev value="Vertical">Vertical
  </form>
  <div class="parent-item2">
    <div id="knob2"></div>
  </div>

检查fiddle。

Answer 1

对于CSS解决方案（您希望的浏览器支持的内容），您可以使用checked属性。

.control { 
    display: none;
}
:checked + .control {
    display: block;
}

http://jsfiddle.net/mwwgy0bs/12/

对于JS解决方案，我们可以将data-attribute应用于inputs，将.control { display: none; } [data-selected=true] + .control { display: block; }设置为＆＃34;已选择＆＃34;。然后我们的CSS略有改变：

$(document).ready(function() {
    var $selected = $('input:radio[name=angle]').eq(0);
    $selected.attr('data-selected', true);

    // Set event binding
    $('input:radio[name=angle]').change(function() {
        $selected.attr('data-selected', false);
        $selected = $(this).attr('data-selected', true);
    });
});

我们的JS看起来像：

[data-selected=true]

http://jsfiddle.net/mwwgy0bs/20/

由于$(document).ready(function() { var $selected = $('input:radio[name=angle]').eq(0); $selected.toggleClass('selected'); // Set event binding $('input:radio[name=angle]').change(function() { $selected.toggleClass('selected'); $selected = $(this).toggleClass('selected'); }); });是属性选择器，因此兼容性可能是个问题。可以重新编写解决方案以使用类，例如：

class MainMenu(tk.Menu):

    def __init__(self, parent):
       tk.Menu.__init__(self, parent)
       self.add_comand(label='foo', self._handler)
       return

    def _handler(self, *args):
        print('handling menu')       
        self.event_generate('<<abc>>')
        return

http://jsfiddle.net/mwwgy0bs/21/

Answer 2

将您的if语句更改为：

if $('input[name=angle]:checked').val() == 'Horizontal'

Answer 3

您最初可以隐藏所有父项。如果你有相同的标记，你可以想出这样的东西。

$(document).ready(function () {

    // Hide all the items
    $('.item').addClass('hide');

    $('input:radio[name=angle]').change(function () {
        // Hide all the items
        $('.item').addClass('hide');

        // Get the next immediate parent
        var $container = $(this).next('.item');

        // Display the image
        $container.removeClass('hide');
    });
});

<强> Check Fiddle

此外，我会首先修复标记，在所有可能的位置添加引号。然后将一个公共类添加到父容器中。

Answer 4

使用.toggle()隐藏和显示DIV，具体取决于所选的值。

$(document).ready(function() {
  $('input:radio[name=angle]').change(function() {
    $(".parent-item").toggle(this.value == 'Horizontal');
    $(".parent-item2").toggle(this.value == 'Vertical');
  });
});

div.parent-item {
  width: 400px;
  height: 50px;
  margin: 25px;
  border-style: solid;
  border-width: 1px;
}
#knob {
  width: 50px;
  height: 50px;
  background-color: grey;
  margin-left: 25%;
}
div.parent-item2 {
  width: 50px;
  height: 400px;
  margin: 25px;
  border-style: solid;
  border-width: 1px;
  display: none;
}
#knob2 {
  width: 50px;
  height: 50px;
  background-color: grey;
  margin-right: 50%;
  margin-top: 165%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="radio" name="angle" id=shapeh checked="checked" value="Horizontal">Horizontal
<div class="parent-item">
  <div id="knob"></div>
</div>

<input type="radio" name="angle" id=shapev value="Vertical">Vertical
</form>
<div class="parent-item2">
  <div id="knob2"></div>
</div>

Answer 5

你必须这样做才能隐藏div

if (this.value == 'Horizontal')
        {   
            $("#knob, .parent-item").show();
             $("#knob2, .parent-item2").hide();
        }

检查小提琴http://jsfiddle.net/mwwgy0bs/19/

如何仅在单击单选按钮时才显示此div？

5 个答案: