在窗体内选择一类单选按钮

Selecting a class of radio button inside a form

本文关键字：一类 单选按钮 窗体 选择      更新时间：2023-09-26

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

我的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函数来选择我想要的？

$('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，直接在input s上进行change事件。

 $(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();
      }
 }
相关文章：