复选框/单选在 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 中它似乎改变了选中的属性。

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;      
}

Here's a demo

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 example

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

Answer 4

很少观察，

1. 在设置默认选中元素时，您使用的是复杂的选择器，而可以使用简单的id 选择器jQuery('#typprofilu0') 来完成。
   
2. 要在取消选中其他复选框时忽略当前项目，您可以使用.not()
3. 然后，正如大家所建议的那样，使用.prop() 来更改运行时dom 属性，例如checked 和selected，而不是.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);
});

演示：Fiddle

Answer 5

试试这个

例子：

   <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，元素）。

Fiddle Demo

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);
});

DEMO

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