Question

我发现了类似于我想要做的各种问题，但我的JS知识几乎不存在，所以我不确定如何正确编码。我有几个PHP循环块来输出我的复选框，如下面两个：

<tr>
    <td class="first">
    P/Hol in lieu
    </td>
    <?php
    for( $x=1; $x<=14; $x++) {
        echo '<td class="checkbox checkbox'.$x.'"><input type="checkbox" name="phollieu'.$x.'" id="phollieu'.$x.'" tabindex="'.$x.'"></td>'."\n";
    }
    ?>
</tr>
<tr>
    <td class="first">
    Public Holiday
    </td>
    <?php
    for( $x=1; $x<=14; $x++) {
        echo '<td class="checkbox checkbox'.$x.'"><input type="checkbox" name="phol'.$x.'" id="phol'.$x.'" tabindex="'.$x.'"></td>'."\n";
    }
    ?>
</tr>

我想要做的是创建一个贯穿每个组的JS循环（因此类checkbox'.$x.'以确保每个列具有相同的标识符）并且每个组只允许一个复选框。

我在其他人的问题中找到了这段代码，在查看Fiddle时，它完全符合我的要求，但是我不确定如何将JS修改为环。我会使用静态代码，但我想尽可能地减少我的代码以提高可读性，我知道我可以这样做。

 $('input:checkbox').click( function() {
 //If the most recently checked box is in a different group
     if($(this).attr('name') != $(this).siblings(':checked').attr('name'))
     {
         //remove all checks apart from the group that the most recent check has been made
         $(this).siblings(':checked').attr('checked', false);
     }
 });

这是布局：Screenshot

Answer 1

似乎你想让复选框像单选按钮一样，但是因为你想要一个垂直布局而不能使用收音机？您可以使用CSS使它们具有垂直布局（不要问我该怎么做！），但以下是您想要的：

<!-- sample table -->
<table>
  <tr>
    <td><input type="checkbox" name="col0">
    <td><input type="checkbox" name="col1">
    <td><input type="checkbox" name="col2">
  <tr>
    <td><input type="checkbox" name="col0">
    <td><input type="checkbox" name="col1">
    <td><input type="checkbox" name="col2">
  <tr>
    <td><input type="checkbox" name="col0">
    <td><input type="checkbox" name="col1">
    <td><input type="checkbox" name="col2">
</table>

<script>

// Simple function to add click listeners
function addClick() {
  var inputs = document.getElementsByTagName('input');
  for (var i=0, iLen=inputs.length; i<iLen; i++) {
    inputs[i].onclick = checkChecked;
  }
}

window.onload = addClick;

// Only allow one checked checkbox per column
function checkChecked() {
  var els = document.getElementsByName(this.name);
  for (var i=0, iLen=els.length; i<iLen; i++) {
    if (els[i] != this) els[i].checked = false;
  }  
}
</script>

上述内容与所使用的每个浏览器兼容，返回IE 6或更高版本。

修改

顺便说一句，如果 NodeList 接口支持迭代器，那么可能会出现以下情况：

// Add simple each support in browsers with NodeList constructor
if (typeof NodeList != 'undefined' && NodeList.prototype && !NodeList.prototype.each) {
  NodeList.prototype.each = function(fn) {
    for (var i=0, iLen=this.length; i<iLen; i++) {
      fn(this[i], i, this);
    }
  } 
}

// Simple function to add click listeners
function addClick() {
  document.querySelectorAll('input[type=checkbox]').each(function(el){
    el.onclick = checkChecked;
  });
}

window.onload = addClick;

// Only allow one checked checkbox per column
function checkChecked() {
  var tgt = this;
  document.querySelectorAll('[name=' + tgt.name + ']').each(function(el) {
    if (el != tgt) el.checked = false;
  });
}

我并不是建议您执行上述操作（尽管它适用于现代浏览器）因为它不健壮，特别是对于实时NodeLists或由该功能修改的那些，但说明了可能性。早期库的一个特性是支持选择器， querySelector 接口修复了它。

现在是时候向NodeList添加一个迭代器，它也将被HTMLCollection继承......： - ）

Answer 2

这是一个简单的jQuery函数，可以满足您的需求：

function theCheckboxGroups(namePrefix){
    $("input:checkbox[name^='"+namePrefix+"']").click(function() {
        if($(this).attr('name') != $(this).siblings("[name^='"+namePrefix+"']").attr('name'))
        {
            $(this).siblings("[name^='"+namePrefix+"']").attr('checked', false);
        }
    });
}
theCheckboxGroups("phollieu");
theCheckboxGroups("phoy");

最后两行调用该函数。

CAVEAT：您必须重命名其中一个＆＃39;组，最好是第二个组;因为他们都使用了＆＃39; phol＆＃39;作为前缀，因此匹配页面上的所有复选框元素。

编辑：我误解了你的问题。请检查下面的更新代码。

function theCheckboxGroups(namePrefix){
    $("."+namePrefix).click(function(){
        var theID = $(this).attr('class').match(/(\d*$)/)[1];
        // Add REGEX to ensure that number is preceded by letters (I'll leave that to you!)
        $("input[name$='"+theID+"']").not($(this).children()).attr('checked', false);
    });
}
$(".checkbox").each(function(){
    theCheckboxGroups($(this).attr('class').split(' ')[1]);
});

很大程度上未经测试，但有效！另外，请注意代码中的注释（请参阅下面有关REGEX的评论）。

http://jsfiddle.net/9M9ez/

PHP JS允许组中的一个复选框

2 个答案:

修改