Question

我正在使用jquery根据用户输入显示一些表单。我有一个基本信息填充，然后用户选择单选按钮，将根据输入显示一个不同的形式（四个单选按钮，2个问题）。问题是我不知道如何选择它，我想为每个问题设置两个distint函数。

我的Jquery代码（只是我想要的想法）：

 $(document).ready(function () {
    $('form[name="THE_FORM"]'.find('p.ISVM')).click(function () {
        if ($(this).attr("value") == "1") {
        $('#first').hide();
        $('#second').show();
    }
    if ($(this).attr("value") == "2") {
        $('#first').show();
        $('#second').hide();
    }
 });

    $('form[name="THE_FORM"]'.find('p.ISVH').click(function () {
        if ($(this).attr("value") == "3") {
        $('#third').hide();
        $('#fourth').show();
    }
    if ($(this).attr("value") == "4") {
        $('#third').show();
        $('#fourth').hide();
    }
  });
});

HTML：

<div id="main">
   <form name="The_FORM">
         <p class = "ISVH"> <span> Is Virtual host? </span>
            <label for="VH"> Yes <input id="VH" type="radio" name="VH" value="3"> </label>
            <label for="NVH"> No <input id="NVH" type="radio" name="VH" value="4"> </label> </p>

        <p class = "ISVM"> <span> Is Virtual Machine? </span>
            <label for="VM"> Yes <input id="VM" type="radio" name="VM" value="1"> </label>
            <label for="PM"> No <input id="PM" type="radio" name="VM" value="2"> </label> </p>

 ...divs first, second, third, fourth here...
     </form>
 </div>

我试过了：

  $('form[name="THE_FORM"]'.find('p.ISVM')).click(function () ...
  $('form[name="THE_FORM"]: p.ISVM')).click(function () ...

位不起作用.. 我在这做错了什么？我如何编写jquery函数来选择我想要的东西？

Answer 1

$('form[name="THE_FORM"]'.find('p.ISVM')).click(function () ...

应该是

$('form[name="THE_FORM"]').find('p.ISVM').click(function () ...

，而

$('form[name="THE_FORM"]: p.ISVM')).click(function () ...

应该是

$('form[name="THE_FORM"] p.ISVM')).click(function () ...

此外，使用name属性不如使用ID有效：

然后其中一个是我的偏好：

$('#THE_FORM').find('p.ISVM').click(function () ...
$('#THE_FORM p.ISVM').click(function () ...

甚至

$('#THE_FORM').on('click', 'p.ISVM', function () ...

它做了别的事，但其他的东西很好。

更好的是，我可能会忽略click并直接转到change上的input事件。

Answer 2

 $(input[name*='VH']).change()
 {
      var vh= $(input[name*='VH']).val();

      if (vh == 1 )
      {
          $('#first').hide();
          $('#second').show();
      } else if (vh == 2) 
      {
          $('#first').show();
          $('#second').hide();
      }
 }

 $(input[name*='VM']).change(){
      var vm = $(input[name*='VM']).val();

      if (vm == 1 )
      {
          $('#third').hide();
          $('#fourth').show();
      } else if (vh == 2) 
      {
          $('#fourth').hide();
          $('#third').show();
      }
 }

在表单中选择一类单选按钮

2 个答案: