jQuery - 选中的复选框答案

【问题标题】：jQuery - Checkbox CheckedjQuery - 选中的复选框
【发布时间】：2017-01-26 22:47:57
【问题描述】：

prop("checked", false) 是否会重置复选框上的 <option> 值？例如：

<input type="checkbox" name="price_range" value="1" id="ceo"> < $10,000
<input type="checkbox" name="price_range" value="2" id="bod"> < $ 200,000.00

假设我有两个复选框，当我点击id=ceo 时，我点击id=bod 它将覆盖复选框的值。我可以使用如下编码来获取值吗：

if ($('#ceo').is(":checked"))
{
    //if ceo is check           
} 
else if ($('#bod').is(":checked")) 
{
    //if bod is check
} 
else 
{
   //set prop("checked", false)
}

【问题讨论】：

使用这个：stackoverflow.com/questions/2279760/…
“prop("checked", false) 是否重置复选框上的<option> 值？” 复选框没有<option> value。你到底在问什么？ prop("checked", false) 使复选框未选中。就是这样。
听起来你的复选框应该是单选按钮。
"是否 prop("checked", false) 重置复选框上的 " - 不会。它会更改复选框上的“checked”属性，仅此而已.
这可能会对您有所帮助。 stackoverflow.com/questions/5839884/…

标签： javascript jquery checkbox

【解决方案1】：

在jquery中使用属性选择器

$("input[name='price_range']").click(function() {
  $("input[name='price_range']").removeProp('checked');
  $(this).prop('checked', true);
  console.log(this.value);
});

【讨论】：

我试过你的，效果很好。谢谢@SudharsanS。您能否简要解释一下.removeProp('checked') 的用途。我不清楚。

【解决方案2】：

.prop("checked", false) 使复选框未选中。而已。它对复选框的 value 无效（如果这就是您所说的“

听起来你的复选框应该是单选按钮，因为用户不希望复选框表现得像单选按钮，而且意外会导致糟糕的用户体验。

但如果重要的是它们是复选框，但也是互斥的，您可以通过搜索具有相同名称的其他人并取消选中它们来实现：

$("input[name=price_range]").on("click", function() {
  if (this.checked) {
    $("input[name=" + this.name + "]").not(this).prop("checked", false);
  }
});

例子：

$("input[name=price_range]").on("click", function() {
  if (this.checked) {
    $("input[name=" + this.name + "]").not(this).prop("checked", false);
  }
});

<label>
  <input type="checkbox" name="price_range" value="1" id="ceo">&lt; $10,000</label>
<label>
  <input type="checkbox" name="price_range" value="2" id="bod">&gt; $ 200,000.00</label>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

（另请参见 sn-p 中label 的使用。）

【讨论】：

【解决方案3】：

我想您希望在任何时候最多选中一个复选框，对吧？如果是这种情况，您可以签出radio 输入。

【讨论】：

【解决方案4】：

你应该在这里使用单选按钮而不是复选框

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="price_range" value="1" id="ceo"> 
<input type="radio" name="price_range" value="2" id="bod">

当您要选择多个值时，应使用复选框。但是，如果您希望使用复选框来实现它，那么

$('input:checkbox').click(function() {
    $('input:checkbox').not(this).prop('checked', false);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="price_range" value="1" id="ceo"> 
<input type="checkbox" name="price_range" value="2" id="bod">

【讨论】：

【解决方案5】：

$("input[name=price_range]").on("click", function() {
    if (this.checked && this.id === 'ceo') {
        // do code for ceo
    }
    else if (this.checked && this.id === 'bod') {
            //do code for bod;
    }
    else{
       //do code;
    }
});

【讨论】：

尼提亚。假设我有 100 个复选框，那么你的代码呢？
请编辑更多信息。不建议使用纯代码和“试试这个”的答案，因为它们不包含可搜索的内容，也没有解释为什么有人应该“试试这个”。