jquery - 复选框/单选在 HTML 中被选中=“已选中”，但看起来未选中

Question

我试图确保用户只能选择一个复选框，但看起来没有任何检查。我究竟做错了什么？

<div class="formField rsform-block rsform-block-typprofilu">
    <br>
    <input name="form[typprofilu][]" type="checkbox" value="Montreal (Oceľ)" id="typprofilu0" checked="checked">
    <label for="typprofilu0">Montreal (Oceľ)</label>
    <input name="form[typprofilu][]" type="checkbox" value="Halifax (Oceľ)" id="typprofilu1">
    <label for="typprofilu1">Halifax (Oceľ)</label>
    <input name="form[typprofilu][]" type="checkbox" value="Calgary (Hliník)" id="typprofilu2">
    <label for="typprofilu2">Calgary (Hliník)</label>
    <input name="form[typprofilu][]" type="checkbox" value="Niagara (Hliník)" id="typprofilu3">
    <label for="typprofilu3">Niagara (Hliník)</label>
    <input name="form[typprofilu][]" type="checkbox" value="Hudson (Hliník)" id="typprofilu4">
    <label for="typprofilu4">Hudson (Hliník)</label><br>
    <span id="component781" class="formNoError">Invalid Input</span>
    <br>
</div>

jQuery：

jQuery('.rsform-block-typprofilu input#typprofilu0[type="checkbox"]').attr('checked',true); 

    jQuery('body').on('click','.rsform-block-typprofilu input[name="form[typprofilu][]"]',function(){
                jQuery('.rsform-block-typprofilu input[name="form[typprofilu][]"]').attr('checked', false);
                var whatIsChecked = jQuery(this).attr('id');
                //var isChecked = jQuery(this).is(':checked');   
                jQuery(this).attr('id',whatIsChecked).attr('checked',true);
            });

已编辑：带有单选按钮的解决方案

<div class="formField rsform-block rsform-block-typprofilu">
        <br>
        <input name="form[typprofilu]" type="radio" value="Montreal (Oceľ)" id="typprofilu0" checked="checked"><label for="typprofilu0">Montreal (Oceľ)</label><input name="form[typprofilu]" type="radio" value="Halifax (Oceľ)" id="typprofilu1"><label for="typprofilu1">Halifax (Oceľ)</label><input name="form[typprofilu]" type="radio" value="Calgary (Hliník)" id="typprofilu2"><label for="typprofilu2">Calgary (Hliník)</label><input name="form[typprofilu]" type="radio" value="Niagara (Hliník)" id="typprofilu3"><label for="typprofilu3">Niagara (Hliník)</label><input name="form[typprofilu]" type="radio" value="Hudson (Hliník)" id="typprofilu4"><label for="typprofilu4">Hudson (Hliník)</label><br>
        <span id="component782" class="formNoError">Invalid Input</span>
        <br>
    </div>

 jQuery('.rsform-block-typprofilu input#typprofilu0[type="radio"]').attr('checked',true);

jQuery('body').on('click','.rsform-block-typprofilu input[name="form[typprofilu]"]',function(){ // ez a radiok kozul a valasztasom
    jQuery('.rsform-block-typprofilu input[name="form[typprofilu]"]').attr('checked', false);
var whatIsChecked = jQuery(this).attr('id');
    var isChecked = jQuery(this).is(':checked');

     jQuery(this).attr('id',whatIsChecked).attr('checked',true);
});

它没有改变......选择的是第一个......但在HTML中它似乎改变了检查的attr。

Answer 1

如果您只想在一组复选框中选择一个，那么为什么不使用单选按钮呢？他们本机提供此功能。

<input type="radio" name="">

如果您希望能够取消选择单选按钮（类似于复选框功能），那么您可以使用 JavaScript 实现它。

var radios = $(':radio');

radios.on('click', function() {
  var radio = $(this);

  // because .is(:checked) is true AS
  // you check, we use our own flag that
  // is only true AFTER you check        
  radio.trigger(radio.data('ischecked') ? 'uncheck' : 'check');
});

// when the radio selection is changed, fire 
// the uncheck event on the selected radio's 
// sibling that was checked
radios.on('change', function() {
  var siblings = $(':radio[name="' + this.name + '"]').not(this);

  siblings.each(function() {
    var sibling = $(this);
    if (sibling.data('ischecked')) {
      sibling.trigger('uncheck');
    }  
  });
});

// custom check / uncheck events
radios.on('check uncheck', function(e) {
  var checked = (e.type === 'check');
  $(this).data('ischecked', checked).attr('checked', checked);
});

// make sure all radios have the necessary 
// ischecked flag on DOM ready
radios.filter(':checked').each(function(i, r) {
  $(this).trigger('check');
});

如果您喜欢这种样式，您还可以使单选按钮看起来像复选框（在不包括 IE 的现代浏览器中）：

input[type="radio"] {
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
  -ms-appearance: checkbox;     /* not currently supported */
  -o-appearance: checkbox;      /* not currently supported */
  appearance: checkbox;      
}

这是一个演示

Answer 2

如果您将 html 代码包装在一些基本的 html 标记中，将其保存为 .html 文件并加载到浏览器中，您可以清楚地看到第一个复选框被选中。

<html>
<body>
<div class="formField rsform-block rsform-block-typprofilu">
<br>
<input name="form[typprofilu][]" type="checkbox" value="Montreal (Oceľ)" id="typprofilu0" checked="checked">
<label for="typprofilu0">Montreal (Oceľ)</label>
<input name="form[typprofilu][]" type="checkbox" value="Halifax (Oceľ)" id="typprofilu1">
<label for="typprofilu1">Halifax (Oceľ)</label>
<input name="form[typprofilu][]" type="checkbox" value="Calgary (Hliník)" id="typprofilu2">
<label for="typprofilu2">Calgary (Hliník)</label>
<input name="form[typprofilu][]" type="checkbox" value="Niagara (Hliník)" id="typprofilu3">
<label for="typprofilu3">Niagara (Hliník)</label>
<input name="form[typprofilu][]" type="checkbox" value="Hudson (Hliník)" id="typprofilu4">
<label for="typprofilu4">Hudson (Hliník)</label><br>
<span id="component781" class="formNoError">Invalid Input</span>
<br>
</div>
</body>
</html>

我怀疑你的样式表有问题？

Answer 3

您使用的是什么 jQuery 库？在 jQuery 1.9.1 中使用prop而不是 attr，工作示例：jsFiddle 示例

我在 prop 和 attr 方法以及复选框的选中属性方面遇到了一些问题，如果我记得正确，它取决于 jQuery 版本。

Answer 4

试试这个

例子：

   <div class="formField rsform-block rsform-block-typprofilu">
     <input type="radio" value="first" id="1" checked="checked"/>
     <input type="radio" value="second" id="2"/>
     <input type="radio" value="third" id="3"/>
   </div>


   $(document).ready(function(){

     var previousCheckedElem = $("#1")

     $("input[type='radio']").click(function(e){
         previousCheckedElem.attr("checked",false);
         previousCheckedElem = $(this);
     });
   });

根据您的要求进行更改（例如：id，元素）。

小提琴演示

Answer 5

很少的观察，

1. 在设置默认选中元素时，您使用的是复杂的选择器，而可以使用简单的id选择器来完成jQuery('#typprofilu0')。
   
2. 要在取消选中其他复选框时忽略当前项目，您可以使用.not()
3. 然后再次正如每个人所建议的那样使用.prop()来更改运行时 dom 属性，例如checkedandselected而不是.attr()

它应该像这样简单

jQuery('#typprofilu0').prop('checked',true); 

jQuery('body').on('click','.rsform-block-typprofilu input[name="form[typprofilu][]"]',function(){
    jQuery('.rsform-block-typprofilu input[name="form[typprofilu][]"]').not(this).prop('checked', false);
});

演示：小提琴

Answer 6

我刚刚意识到，从 JS 的角度来看，使用复选框模拟单选按钮功能实际上比使用单选框模拟复选框功能更容易/更轻松：/

试试这个：

var checkboxes = $(':checkbox');

checkboxes.on('click', function() {
  var group = '[name="' + this.name + '"]',
      siblings = checkboxes.filter(group).not(this);
  siblings.filter(':checked').attr('checked', false);
});

演示

但是，如果用户决定禁用 JS，他们将能够选择多个，因此这是您需要做出的决定。