Question

所以，我有一个表格如下。我想在选中复选框（For All Day）时选择全部工作。有什么方法我可以通过HTML或我应该去php或javascript？

<form>
  <table>
      <tr>
        <td colspan="4">
          <!--on selecting the checkbox below all radio buttons under working must get selected-->
          <input type="checkbox"  name="day"  />All Day
        </td>
        <td><b>Working</b></td>
        <td><b>Close</b></td>
      </tr>
      <tr>
        <td colspan="4"><b>Monday</b></td>
        <td><input type="radio" name="mday" value="work" /></td>
        <td><input type="radio" name="mday"  /></td>
      </tr>
      <tr>
        <td colspan="4"><b>Tuesday</b></td>
        <td><input type="radio" name="tday" value="work" /></td>
        <td><input type="radio" name="tday"  /></td>
      </tr>
      <tr>
        <td colspan="4"><b>Wednesday</b></td>
        <td><input type="radio" name="wday" value="work" /></td>
        <td><input type="radio" name="wday"  /></td>
      </tr>
      <tr>
        <td colspan="4"><b>Thursday</b></td>
        <td><input type="radio" name="thday" value="work" /></td>
        <td><input type="radio" name="thday"  /></td>
      </tr>
      <tr>
        <td colspan="4"><b>Friday</b></td>
        <td><input type="radio" name="fday" value="work"  /></td>
        <td><input type="radio" name="fday"  /></td>
      </tr>
      <tr>
        <td colspan="4"><b>Saturday</b></td>
        <td><input type="radio" name="sday" value="work" /></td>
        <td><input type="radio" name="sday" value="close"  /></td>
      </tr>
      <tr>
        <td colspan="4"><b>Sunday</b></td>
        <td><input type="radio" name="suday" value="work"  /></td>
        <td><input type="radio" name="suday"  /></td>
      </tr>
  </table>
</form>

Answer 1

你不能用php做到这一点，至少没有重新加载页面或发出Ajax请求，但这是不切实际的。最好的选择是JavaScript;参考这个问题，它解决了您的问题：How to implement "select all" check box in HTML?

基本上，您所要做的就是在复选框上绑定onClick事件＆＃34;所有日期＆＃34;触发JavaScript函数。然后，该函数获取复选框列表，遍历所有复选框并检查它们。 html（取自我提供的链接）应与此类似：

<input type="checkbox" onClick="toggle(this)" />All days<br/>

然后是剧本：

function toggle(source) {
  checkboxes = document.getElementsByName('x');
  for(var i=0, n=checkboxes.length;i<n;i++) {
    checkboxes[i].checked = source.checked;
  }
}

Answer 2

最简单的方法是使用一个javascript函数，该函数将在全天复选框值更改时调用。

然后，您的功能将被检查，运行列表并检查所有日期

Answer 3

尝试使用jquery

现场演示 Here

脚本

$("#allday").click(function() {
   $("input:radio[value='work']").attr("checked", "checked");
});

下面的代码段示例

＆＃13;

$("#allday").click(function() {
$("input:radio[value='work']").attr("checked", "checked");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="radio" name="allday" id="allday"/>All Day Working Close <br>
<table>
<tr>
<td colspan="4"><tr>
<td colspan="4">
<b>Monday</b>
</td>
<td>
<input type="radio" name="mday" value="work" /></td>
<td>
<input type="radio" name="mday"  />
</td>
</tr>

<tr>
<td colspan="4">
<b>Tuesday</b>
</td>
<td>
<input type="radio" name="tday" value="work" /></td>
<td>
<input type="radio" name="tday"  />
</td>
</tr>

<tr>
<td colspan="4">
<b>Wednesday</b>
</td>
<td>
<input type="radio" name="wday" value="work" /></td>
<td>
<input type="radio" name="wday"  />
</td>
</tr>

<tr>
<td colspan="4">
<b>Thursday</b>
</td>
<td>
<input type="radio" name="thday" value="work" /></td>
<td>
<input type="radio" name="thday"  />
</td>
</tr>

<tr>
<td colspan="4">
<b>Friday</b>
</td>
<td>
<input type="radio" name="fday" value="work"  /></td>
<td>
<input type="radio" name="fday"  />
</td>
</tr>

<tr>
<td colspan="4">
<b>Saturday</b>
</td>
<td>
<input type="radio" name="sday" value="work" /></td>
<td>
<input type="radio" name="sday" value="close"  />
</td>
</tr>

<tr>
<td colspan="4">
<b>Sunday</b>
</td>
<td>
<input type="radio" name="suday" value="work"  /></td>
<td>
<input type="radio" name="suday"  />
</td>
</tr>
</table>
</form>

＆＃13;

Answer 4

使用jQuery检查/取消选中所有工作日，基于检查/取消选中＆＃34;所有日期＆＃34;：

＆＃13;

$(document).ready(function(){
  $(':checkbox[name="day"]').click(function(){
    if($(this).is(':checked')){
      $("input:radio[value='work']").prop("checked", true);
    } else {
      $("input:radio[value='work']").prop("checked", false);
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <table border="1" colspan="0" cellpadding="0">
      <tr>
        <td colspan="4">
          <!--on selecting the checkbox below all radio buttons under working must get selected-->
          <input type="checkbox" name="day"  />All Day
        </td>
        <td><b>Working</b></td>
        <td><b>Close</b></td>
      </tr>
      <tr>
        <td colspan="4"><b>Monday</b></td>
        <td><input type="radio" name="mday" value="work" /></td>
        <td><input type="radio" name="mday"  /></td>
      </tr>
      <tr>
        <td colspan="4"><b>Tuesday</b></td>
        <td><input type="radio" name="tday" value="work" /></td>
        <td><input type="radio" name="tday"  /></td>
      </tr>
      <tr>
        <td colspan="4"><b>Wednesday</b></td>
        <td><input type="radio" name="wday" value="work" /></td>
        <td><input type="radio" name="wday"  /></td>
      </tr>
      <tr>
        <td colspan="4"><b>Thursday</b></td>
        <td><input type="radio" name="thday" value="work" /></td>
        <td><input type="radio" name="thday"  /></td>
      </tr>
      <tr>
        <td colspan="4"><b>Friday</b></td>
        <td><input type="radio" name="fday" value="work"  /></td>
        <td><input type="radio" name="fday"  /></td>
      </tr>
      <tr>
        <td colspan="4"><b>Saturday</b></td>
        <td><input type="radio" name="sday" value="work" /></td>
        <td><input type="radio" name="sday" value="close"  /></td>
      </tr>
      <tr>
        <td colspan="4"><b>Sunday</b></td>
        <td><input type="radio" name="suday" value="work"  /></td>
        <td><input type="radio" name="suday"  /></td>
      </tr>
  </table>
</form>

＆＃13;

PHP-根据复选框

4 个答案: