如何使用javascript通过当前复选框动态更改默认复选框?

时间:2018-08-20 07:48:27

标签: javascript jquery html


我有一个由Perl语言生成的表单。我想自定义此表单以添加CSS效果,而不使用默认的perl表单。 该表格效果很好。我可以在启动查询之前选择每个单选按钮。但是在确认表格之后 单选按钮的焦点始终返回默认复选框,即“日期”。我认为问题不在于Perl,而在于我使用javascript函数的方式。但是在表单验证后,我没有找到如何动态更改复选框并选择当前复选框的方法?
有人有主意吗?
预先谢谢你

这是我的html(html 5)脚本:

print '<form name="newForm">';
print '<div>';
print '<input type="radio" name="sort" id="rdo-1" value="up2date" checked>';
print '<label for="rdo-1"><span>Date</span></label>';
print '</div>';
print '<div>';
print '<input type="radio" name="sort" id="rdo-2" value="title" >';
print '<label for="rdo-2"><span>Title</span></label>';
print '</div>';
print '<div>';
print '<input type="radio" name="sort" id="rdo-3" value="author">';
print '<label for="rdo-3"><span>Author</span></label>';
print '</div>';
print '<button type="submit" style="margin-right: 15px;" onClick="sorting()">Sort</button>';
print '</form>';
print "<br />\n"; 

这是我的Javascript:

function sorting() {
    if (document.getElementById("rdo-1").checked){
        document.getElementById("newForm").submit();
        document.getElementById("rdo-1").checked = true;
        document.getElementById("rdo-1").focus();
    } else if (document.getElementById("rdo-2").checked){
        document.getElementById("newForm").submit();
        document.getElementById("rdo-2").checked = true;
        document.getElementById("rdo-2").focus();   
    } else {
        document.getElementById("newForm").submit();
        document.getElementById("rdo-3").checked = true;
        document.getElementById("rdo-3").focus();   
    }

}   

2 个答案:

答案 0 :(得分:1)

首先,您不应该使用内联事件处理程序。其次,您要多次提交表单。只需单击提交按钮,浏览器就会提交表单。然后,在JavaScript中,您正在重新提交表单(为什么?)。第三,提交表单后,可能会触发onclick。使用jQuery和Submit事件:

(function($) {
  $(function() {
    $('form[name="newForm"]').submit(function() {
      var rdoOne = $('#rdo-1'),
          rdoTwo = $('#rdo-2'),
          rdoThree = $('#rdo-3');

      if (rdoOne.is(':checked')) {
        rdoOne.focus();
      }
      else if (rdoTwo.is(':checked')) {
        rdoTwo.focus();
      }
      else if (rdoThree.is(':checked')) {
        rdoThree.focus();
      }
    });
  });
})(jQuery);

答案 1 :(得分:0)

我通过使用 print 命令设置条件解决了我的问题,因为我认为命令行 print'... checked 可以修复选中的内容,并且不会丢失以进行修改并将其写回其他行。如果有人有更好的主意,我很想认识他。再次感谢您的帮助。
我的新脚本如下:

print "<form name='newForm'>\n";
    my $mySort = '';
    $mySort = $cgi->param("sort");
    if ($mySort eq "title"){
      print "<input type='radio' name='sort' id='rdo-1' value='up2date'>\n";
      print "<label for='rdo-1'><span>Date</span></label>\n";
      print "<input type='radio' name='sort' id='rdo-2' value='title' checked>\n";
      print "<label for='rdo-2'><span>Title</span></label>\n";
      print "<input type='radio' name='sort' id='rdo-3' value='author'>\n";
      print "<label for='rdo-3'><span>Author</span></label>\n";
    }elsif ($mySort eq "Author"){
      print "<input type='radio' name='sort' id='rdo-1' value='up2date'>\n";
      print "<label for='rdo-1'><span>Date</span></label>\n";
      print "<input type='radio' name='sort' id='rdo-2' value='title'>\n";
      print "<label for='rdo-2'><span>title</span></label>\n";
      print "<input type='radio' name='sort' id='rdo-3' value='Author' checked>\n";
      print "<label for='rdo-3'><span>Author</span></label>\n";

    } else {
      print "<input type='radio' name='tri' id='rdo-1' value='up2date' checked>\n";
      print "<label for='rdo-1'><span>Date</span></label>\n";
      print "<input type='radio' name='tri' id='rdo-2' value='title'>\n";
      print "<label for='rdo-2'><span>title</span></label>\n";
      print "<input type='radio' name='tri' id='rdo-3' value='Author'>\n";
      print "<label for='rdo-3'><span>Author</span></label>\n";
    }
    print '<button type="submit" style="margin-right: 15px;" value="Submit">Sort</button>';
    print "</form>\n";
    print "<br />\n";