测试JQuery中的单选按钮检查状态无法正常工作

时间:2014-03-31 12:51:25

标签: javascript jquery html if-statement radio-button

我有一组嵌套的If / Else语句,用于确定机器,客户和零件来源的类型,以便将使用该站点的人员指向正确的部门订购零件。这是我的代码:

$('#partName').catcomplete({
            minLength: 2,
            source: data,
            select: function ( event, ui ) {
                $("#partNumber").text(ui.item.Number);
                $("#partDesc").text(ui.item.PartDesc);
                // Determine machine type
                if (ui.item.Type == "All Machines") {
                    $("#machineType").html("<div class='ui-widget'><div class = 'ui-state-highlight ui-corner-all' style='margin=top:5px;'><p><span class='ui-icon ui-icon-info' style='float: left; margin-right: 6px;'></span> Message for parts that go to all machines</p></div></div>");
                }
                else if (ui.item.Type == "Machine Type 1") {
                    $("#machineType").html("<div class='ui-widget'><div class = 'ui-state-error ui-corner-all' style='margin=top:5px;'><p><span class='ui-icon ui-icon-alert' style='float: left; margin-right: 6px;'></span> Message for parts ONLY for Machine Type 1</p></div></div>");
                }
                else if (ui.item.Type == "Machine Type 2") {
                    $("#machineType").html("<div class='ui-widget'><div class = 'ui-state-error ui-corner-all' style='margin=top:5px;'><p><span class='ui-icon ui-icon-alert' style='float: left; margin-right: 6px;'></span> Message for parts ONLY for Machine Type 2 </p></div></div>");
                }
               // How determine who to transfer call to
               if ($('#radio1').is(':checked')){
               if (ui.item.type == "Machine Type 1" || "All Machines") {
                   if (ui.item.Source == 1) {
                      $("#partSource").html("<div class='ui-widget'><div class = 'ui-state-highlight ui-corner-all' style='margin=top:5px;'><p><span class='ui-icon ui-icon-info' style='float: left; margin-right: 6px;'></span> Text containing extension #1</p></div></div>");
                   }
                   if (ui.item.Source == 2) {
                      $("#partSource").html("<div class='ui-widget'><div class = 'ui-state-highlight ui-corner-all' style='margin=top:5px;'><p><span class='ui-icon ui-icon-info' style='float: left; margin-right: 6px;'></span> Text containing extension #2</p></div></div>");
                   }
               }
              if (ui.item.type == "Machine Type 2") {
                 if (ui.item.Source == 1) {
                    $("#partSource").html("<div class='ui-widget'><div class = 'ui-state-highlight ui-corner-all' style='margin=top:5px;'><p><span class='ui-icon ui-icon-info' style='float: left; margin-right: 6px;'></span> Text containing extension #1</p></div></div>");
                 }
                 if (ui.item.Source == 2) {
                        $("#partSource").html("<div class='ui-widget'><div class = 'ui-state-highlight ui-corner-all' style='margin=top:5px;'><p><span class='ui-icon ui-icon-info' style='float: left; margin-right: 6px;'></span> Text containing extension #2</p></div></div>"); 
                     }
               }
}
else {
    if (ui.item.type == "Machine Type 1") {
        if (ui.item.Source == 1) {
            $("#partSource").html("<div class='ui-widget'><div class = 'ui-state-error ui-corner-all' style='margin=top:5px;'><p><span class='ui-icon ui-icon-alert' style='float: left; margin-right: 6px;'></span> This machine and its parts are not available to this customer. Please try your search again.</p></div></div>");
        }
        if (ui.item.Source == 2) {
            $("#partSource").html("<div class='ui-widget'><div class = 'ui-state-error ui-corner-all' style='margin=top:5px;'><p><span class='ui-icon ui-icon-alert' style='float: left; margin-right: 6px;'></span> This machine and its parts are not available to this customer. Please try your search again.</p></div></div>");
        }
    }
    if (ui.item.type == "Machine Type 2" || "All Machines") {
        if (ui.item.Source == 1) {
            $("#partSource").html("<div class='ui-widget'><div class = 'ui-state-highlight ui-corner-all' style='margin=top:5px;'><p><span class='ui-icon ui-icon-info' style='float: left; margin-right: 6px;'></span> Text containing extension #3</p></div></div>");
        }
        if (ui.item.Source == 2) {
            $("#partSource").html("<div class='ui-widget'><div class = 'ui-state-highlight ui-corner-all' style='margin=top:5px;'><p><span class='ui-icon ui-icon-info' style='float: left; margin-right: 6px;'></span> Text containing extension #4</p></div></div>"); 
        }
    }

}

包含表单的HTML块,带有单选按钮:

<div id="radio">
            <strong>Select Machine: </strong>
            <input type="radio" value="fsa" id="radio1" name="radio" checked><label for="radio1">Customer Type 1</label>
            <input type="radio" value="evo" id="radio2" name="radio"><label for="radio2">Customer Type 2</label>
        </div>
        <label for="partName"><strong>Part Name:</strong></label>
        <input id="partName" size="50">
        <input class="ui-state-default ui-corner-all" type="button" id="clearPartName" onClick="clear_all()" value="Clear Search">
        </p>
      <div id="partData">
        <div id="partNumberField">
            <p><strong>PBS Part Number:</strong></p>
            <div style="margin: 2px" class="ui-widget-content" id="partNumber">&nbsp;</div>
        </div>
        <div id="partDescField">
            <p><strong>Part Description:</strong></p>
            <div style="margin: 2px"  class="ui-widget-content" id="partDesc">&nbsp;</div>
        </div>
        <div id="machineTypeField">
            <div style="margin: 2px" id="machineType">&nbsp;</div>
        </div>
        <div id="partObtainField">
            <p><strong>Source for Part:</strong></p>
            <div style="margin: 2px" id="partSource">&nbsp;</div>
        </div>
      </div>

但是,if ($('#radio1').is(':checked'))似乎无法正常工作,因为选择客户类型2(会使状态为#radio1为false)和机器类型1不会返回指示该错误消息的错误消息所选客户无法使用本机及其部件。

我试图测试这个单选按钮状态时感到非常困惑,因为当我实际运行页面时,我发现的任何内容似乎都无法正常工作。

1 个答案:

答案 0 :(得分:3)

试试这个,

$("input:radio[name=radio]").click(function(){
     // your codes
  });