根据名称/ ID的一部分选择复选框

时间:2013-06-10 15:16:17

标签: javascript jquery checkbox

我有文件的> section->变量

的cakephp模型结构

我被告知我的问题与javascript / jQuery有关,而不是cakePHP。如果人们不得不从之前的cakephp问题中重新阅读此内容,请致歉。

在表单中,我希望能够列出所有变量,但是嵌套在文档中,然后是段级。这一点很好。

我希望在变量级别的每个项目旁边都有复选框 - 以允许选择变量。

我想在sectionlevel上找一个复选框,选中后会选中该部分变量的所有复选框。

我想要一个文档级别的复选框,以便在选中时它将选择该文档变量的所有复选框(即在所有部分中。)

为方便起见,我已将复选框命名为(好吧,我已经设置了id)(伪代码):

document level: id = Document id
section level: id = Document id_Section id
variable level: id = Document id_Section id_Variable_id

我希望如果我选择了部分级别复选框,我可以通过在变量级复选框的所有ID的开头使用Document id_Section_id存根来设置所有变量级复选框FOR THAT SECTION ...但是也许我是抓住稻草?

以下是各级复选框的示例:(布局道歉)

<?php
//Document level

//all of this within a ForEach loop for documents

echo "<table>";
echo "<tr><td>Collection dates</td><td>".$project_document['data_collection_dates']."</td>";
echo "<td>Select (toggle) all variables"
        .$this->Form->checkbox($project_document['id'], // note that this sets the chkbox id to the value of the current document id
                            array('hiddenField' => false,'onclick'=> 'SelectSection(this,this.name,this.checked);'))
                            ."</td></tr>";
echo "</table>";

foreach ($project_document['ProjectDocumentSection'] as $project_document_section): 
    echo "<h4>" .  $project_document_section['title']. "</h4>";
    echo "<table>";
    echo "<tr><td>Collection Method</td><td>" . $project_document_section['method']. "</td></tr>";
    echo "<tr><td>Collection objective</td><td>" . $project_document_section['objective']. "</td>";
    echo "<td>Select (toggle) all section variables"
            .$this->Form->checkbox($project_document['id']
                ."_".$project_document_section['id'] // and here the chkbox id is set to combination of document id and section is (using _ as separator)
                , array('hiddenField' => false))."</td></tr>";
    echo "</table>";
        echo "<table><tr><th>Full text</th><th>Type</th><th>Format</th><th>Codeset</th></tr>" ; // header for variable table
        foreach ($project_document_section['ProjectDocumentSectionVariable'] as $project_document_section_var):
            echo"<tr><td>".$project_document_section_var['variable_type'] 
                            ."</td><td>".$project_document_section_var['variable_format'] 
                            ."</td><td>";
            echo "<td>".$this->Form->checkbox($project_document['id']
                    ."_".$project_document_section['id']
                        ."_".$project_document_section_var['id'], array('hiddenField' => false))."</td></tr>";
        endforeach;
        echo "</table>";

endforeach;
// and later endforeach for the document itself

?>

渲染时,这可能看起来像这样;

<td>Select (toggle) all variables
<input type="checkbox" name="data[Project][11]"  onclick="SelectSection(this,this.name,this.checked);" value="1" id="Project11"/>
// note that checkbox id and name include ref to document id (11)
</td></tr>

<h4>Details of Health Workers at Facility</h4>

<table>
 <tr><td>Collection Method</td><td>FW completed evaluation on paper</td></tr>
<tr><td>Collection objective</td><td>blah blah blah blah</td>
<td>Select (toggle) all section variables
<input type="checkbox" name="data[Project][11_24]"  value="1" id="Project1124"/></td></tr>
// note that checkbox id and name include ref to document id (11) and section id (24)
</table>
<table>
<tr><th>Full text</th><th>Type</th><th>Format</th><th>Codeset</th></tr>
<tr><td>Site</td><td>Categorical</td><td>Quantative</td>
<td><input type="checkbox" name="data[Project][11_24_402]"  value="1" id="Project1124402"/></td></tr>
// note that checkbox id and name include ref to document id (11), section id (24) and variable id (402)
<tr><td>Facility</td><td>Categorical</td><td>Quantative</td>
<td><input type="checkbox" name="data[Project][11_24_403]"  value="1" id="Project1124403"/></td></tr>
<tr><td>Name</td><td>Text</td><td>Quantative</td>
<td><input type="checkbox" name="data[Project][11_24_404]"  value="1" id="Project1124404"/></td></tr>
<tr><td>Position of Health Worker</td><td>Text</td><td>Quantative</td>
<td><input type="checkbox" name="data[Project][11_24_405]"  value="1" id="Project1124405"/></td></tr>
<tr><td>Description</td><td>Text</td><td>Quantative</td>
<td><input type="checkbox" name="data[Project][11_24_406]"  value="1" id="Project1124406"/></td></tr>
<tr><td>Interviewer Code</td><td>Categorical</td><td>Quantative</td>
<td><input type="checkbox" name="data[Project][11_24_407]"  value="1" id="Project1124407"/></td></tr>
<tr><td>Date of Facility Visit </td><td>Date</td><td>Quantative</td>
<td><input type="checkbox" name="data[Project][11_24_408]"  value="1" id="Project1124408"/></td></tr>
</table>

有没有人建议如何处理这个问题?我相信杀死这只鸟的方法不止一种。

2 个答案:

答案 0 :(得分:1)

您是否尝试过使用jQuery Selectors,更具体地说是Attribute Starts With Selector

答案 1 :(得分:1)

以下代码选择每个input,其type属性为复选框name属性以数据开头。然后它会为每个对应的元素添加一个类(在这个例子中,类 myNewClass 将被添加到找到的每个元素中。

的Javascript

$('input[type="checkbox"][name^=data]').addClass('myNewClass');