如果单击复选框,则验证选择下拉列表

时间:2009-10-05 11:08:25

标签: jquery

我正面临验证列表中的下拉列表的问题。如果< li>内的特定复选框,则有一个复选框和相应的选择框列表。选中,然后相应的选择框应该选择一个值,否则抛出和错误。请帮帮....

html代码如下......

<ul>
<li><input type="checkbox" name="status" />
    <select name="select1a">
    <option>Value 1</option>
    <option>Value 2</option>
    </select>
    <select name="select1b">
    <option>Value 1</option>
    <option>Value 2</option>
    </select>
</li>
<li><input type="checkbox" name="status" />
    <select name="select2a">
    <option>Value 1</option>
    <option>Value 2</option>
    </select>
    <select name="select2b">
    <option>Value 1</option>
    <option>Value 2</option>
    </select>
</li>
<li><input type="checkbox" name="status" />
    <select name="select3a">
    <option>Value 1</option>
    <option>Value 2</option>
    </select>
    <select name="select3b">
    <option>Value 1</option>
    <option>Value 2</option>
    </select>
</li>
</ul>
<input type="submit" name="Approve" />

...谢谢

2 个答案:

答案 0 :(得分:1)

这个如果我试过的代码..我成功验证了复选框,但如果选中此复选框,则用户必须选择与此对应的下拉列表..我正在附加以下代码...

jQuery('#approve').click(function(){
   if(status == 1)
   {
    if (jQuery('input[type="checkbox"]:checked').size() == 0) 
      {
       alert('Please choose an option');
       return false;
      }
      else 
      {
       return true;
      }         
   }
   else if (status == 0)
   {   
   return true;
   }
   });

答案 1 :(得分:0)

一种选择是使用JavaScript。将onclick事件处理程序放在复选框标记中。更改复选框后,将触发onclick事件。从那里,您可以执行验证下拉列表所需的操作。此外,如果您提供表单元素ID,它将更容易。这是一个例子。语法可能有些偏差。

<script type="text/javascript">
    function validateSelect1Lists(checked) {
        if(checked && document.getElementById('select1a').selectedIndex > -1) {
               // Do some validation
        }
    }
</script>


<li>
    <input type="checkbox" name="status" id="status" onclick="validateSelect1Lists(this.checked);" />
    <select name="select1a" id="select1a">
    <option>Value 1</option>
    <option>Value 2</option>
    </select>
    <select name="select1b" id="select1b">
    <option>Value 1</option>
    <option>Value 2</option>
    </select>
</li>