Question

我有两个具有相同名称，不同ID和不同值的复选框当我点击按钮时，我得到两个值

         <input name="t" class="job-filter styled" type="checkbox" name="clstype" value="C" id="CheckCls">
         <label class="label-checkbox" for="Cls" >Classes</label>

         <input name="t" class="job-filter styled" type="checkbox" name="clstype"  value="D" id="CheckDemo">
         <label class="label-checkbox" >Demos</label>

         ///////////////button id is Searchtype////
        $(document).ready(function () {

        $("#Searchtype").click(function () {

        var clas: $("#CheckCls").val(),
        var Demo: $("#CheckDemo").val(),
       });
       });

Answer 1

您正在正确检索值，但分配错误。

你应该有这样的，

var clas = $("#CheckCls").val();
var Demo = $("#CheckDemo").val();

或者像这样，

var values = {
  clas: $("#CheckCls").val(),
  Demo: $("#CheckDemo").val()
};

如果您只想在选择值时检索这些值，则可以按以下方式检查

var clas, Demo;

if($("#CheckCls").is(':checked')){
   clas = $("#CheckCls").val();
}

if($("#CheckDemo").is(':checked')){
   Demo = $("#CheckDemo").val();
}

$(document).ready(function () {

            $("#Searchtype").click(function () {

                 //var clas = $("#CheckCls").val();
                 //var Demo = $("#CheckDemo").val();
              
                 var values = {
                   clas: $("#CheckCls").is(':checked') ? $("#CheckCls").val() : undefined,
                   Demo: $("#CheckDemo").is(':checked') ? $("#CheckDemo").val() : undefined
                 };

                 var clas, Demo;

                 if($("#CheckCls").is(':checked')){
                    clas = $("#CheckCls").val();
                 }

                 if($("#CheckDemo").is(':checked')){
                    Demo = $("#CheckDemo").val();
                 }
              
              console.log(clas);
              console.log(Demo);
              console.log(values);
             });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="t" class="job-filter styled" type="checkbox" name="clstype" value="C" id="CheckCls">
                <label class="label-checkbox" for="Cls" >Classes</label>


                <input name="t" class="job-filter styled" type="checkbox" name="clstype"  value="D" id="CheckDemo">
                <label class="label-checkbox" >Demos</label>
<input type="button" value="Search" id="Searchtype" />

建议：您应该遵循正确的命名标准变量和属性。最推荐的是pascal case 正确的意思。

Answer 2

问题：您只是在点击按钮时检查复选框的值，因此无论是否检查，它始终会为您提供值。您没有检查它是否已检查，然后检索该值。

解决方案：首先检查复选框是否已选中，然后再将值分配给您的变量。

var clas= $("#CheckCls").is(':checked')? $("#CheckCls").val() || '';
var Demo= $("#CheckDemo").is(':checked')? $("#CheckDemo").val() || '';

如何在JQuery中获取复选框值？

2 个答案: