在按钮功能的jQuery中验证无线电输入

时间:2014-04-08 15:10:58

标签: jquery button radio

我有一个带有2个选项的无线电输入,让用户定义他们的性别。单击按钮后,jquery应检查是否选择了任何内容,

如果 - 用收音机输入隐藏div并显示另一个;

如果不是(未选择任何内容)则会显示错误文字。

问题是,如果没有选择任何内容,代码会显示错误文本,但即使用户HAD选择了性别,它也不会隐藏此div并显示另一个div。

jQuery部分:

           $('#button_1').click(function(){
        gender = $('input:radio[name=1_gender]:checked').val();
              if ('input:radio[name=1_gender].not(:checked') {
              $("label#1_gender_error").show();
              $("input#1_gender").focus();
              return false;
              } 
            if ('input:radio[name=1_gender]:checked') {
            $('#gender_div').hide();
            $('#other_div').show();
            }
          });

HTML部分:

      <div id="gender_div">
    <form name="form_gender" action="">
    <fieldset>
      <label for="gender" id="1_gender_label">You are...</label><br />
      <input type="radio" name="1_gender" id="1_men"  value="men" class="text-input" />
      <label for="men">Men</label><br />

   <input type="radio" name="1_gender" id="1_woman"  value="woman" class="text-input" />
   <label for="woman">Woman</label>
    <br />

    <label class="error" for="1_gender" id="1_gender_error">Text for shaming for not selecting gender</label>
    <br />
    <input type="button" name="submit" class="button" id="button_1" value="Next" />
    </fieldset>
    </form>
  </div>

非常感谢任何帮助或提示

1 个答案:

答案 0 :(得分:0)

这样的东西
   $('#button_1').click(function () {


      if (!$("input:radio[name=1_gender]").is(":checked")) {
          $("label#1_gender_error").show();
          $("input#1_gender").focus();
          console.log("not checked")
          return false;
      } else {
          if ('input:radio[name=1_gender]:checked') $('#gender_div').hide();
          $('#other_div').show();
          console.log("checked")
      }
  });

会为你工作

Fiddle

您正在验证if语句中的字符串

if ('input:radio[name=1_gender].not(:checked')

它总是会导致 true