<input class="category" type="radio" name="category" value="1" />携帯
<input class="category" type="radio" name="category" value="2" />スマートフォン
<div id="category_select">
</div>
こういうラジオボタンで下の id="category_select" のdivブロックを下記のjavascriptで
表示したり非表示にしたりしているのは良くある話ですが。
<script>
$(document).ready(function(){
function displayVals() {
var singleValues = $('input[name="category"]:checked').val()
if(singleValues == 2){
$("#category_select").css("display","block");
}else{
$("#category_select").css("display","none");
}
}
$('input[name="category"]:radio').change(displayVals);
displayVals();
});
</script>
cakephpでデータをやり取りすると少し困ってしまう。
普通のヘルパーを使って
<?php
echo $form->input('category', array(
'type'=>'radio',
'legend' => false,
'label'=> true,
'class'=>'category',
'options'=>array('1'=>'携帯', '2'=>'スマートフォン'),
));
?>
このようにViewを書くとname部分が"data[Mobile][category]"になってしまい
<div class="input radio">
<input type="hidden" name="data[Mobile][category]" id="MobileCategory_" value="" />
<input type="radio" name="data[Mobile][category]" id="MobileCategory1" class="category" value="1" />
<label for="MobileCategory1">携帯</label>
<input type="radio" name="data[Mobile][category]" id="MobileCategory2" class="category" value="2" />
<label for="MobileCategory2">スマートフォン</label>
</div>
こんなコードが出力される。
javascriptのSelectors部分がダブルクォーテーションで囲まれているから
input[name="category"] を input[name="data[Mobile][category]"] こう書き換えると
良いように思うが、これでは上手く行かない。理由は上手く説明できないので割愛するが
下記のように"["と"]"をエスケープしてやらなくてはいけない。
input[name="data\[Mobile\]\[category\]"]
だから正しいjavascript文は
<script>
$(document).ready(function(){
function displayVals() {
var singleValues = $('input[name="data\[Mobile\]\[category\]"]:checked').val()
var defined = 0;
if(singleValues == 2){
$("#category_select").css("display","block");
}else{
$("#category_select").css("display","none");
}
}
$('input[name="data\[Mobile\]\[category\]"]:radio').change(displayVals);
$(window).load(function () { displayVals();});
});
</script>
こうなる。
