2011-10-31 8 views
267

Sadece aynı tr işaretli bir onay kutusu işaretlendiğinde tetiklemek istediğim bir işlev var. Lütfen bana neyi yanlış yaptığımı söyle, normal yöntemler işe yaramıyor. TeşekkürjQuery onay kutusu işaretliyse

JS

$(".add_menu_item_table").live('click', function() { 
var value_td = $(this).parents('tr').find('td.td_name').text(); 
if ($('input.checkbox_check').attr(':checked')); { 
    var newDiv = $('<div class="div_menu_button"></div>'); 
    var showDiv = $('<div id="show'+ "0" + numShow++ +'" class="menu_button_info hidden"></div>'); 
    var toggleTrigger = $('<a id="toggleshow'+ "0" + numToggle++ +'" data-target="#show'+ "0" + numTarget++ +'" class="toggle_trigger actions">&nbsp;</a><div style="padding:5px"></div>'); 
    var menuForm = $('<form id="menu_edit_form'+ "0" + numForm++ +'" class="menu_creation_form"></form>'); 
    $('#created_buttons_list').append(
     newDiv.text(value_td)); 
     newDiv.wrap("<li></li>"); 
     newDiv.append(toggleTrigger); 
     newDiv.append(showDiv); 
     showDiv.append(menuForm); 
     menuForm.html('<label for="navigation_label">Navigation Label</label><input id="navigation_label'+ "0" + numLabelone++ +'" type="text" placeholder="Navigation Label" name="navigation_label"><label for="attribute">Attribute</label><input id="attribute'+ "0" + numLabeltwo++ +'" type="text" type="text" placeholder="Attribute" name="attribute"><label for="url">URL</label><input id="url'+ "0" + numLabelthree++ +'" type="text" type="text" placeholder="URL" name="url"><input type="button" value="Remove" class="button_link remove_button"> <input type="reset" value="Cancel" class="button_link">'); 
} 
}); 

var numToggle = 0; 
var numShow = 0; 
var numTarget = 0; 
var numForm = 0; 
var numLabelone = 0; 
var numLabeltwo = 0; 
var numLabelthree = 0; 

HTML

jQuery 1.6 için
<table width="316px" border="0" cellspacing="0" cellpadding="0" id="table-data"> 
        <tbody> 
        <tr> 
        <td width="20px"><input type="checkbox" style="width:20px;" value="1" name="checkbox"></td> 
        <td width="200px"><a href="/admin/feedbackmanager/sortby/2/sortdesc/0">Page Name</a></td> 
        <td width="20px"><a href="/admin/feedbackmanager/sortby/3/sortdesc/0">Add</a></td> 
        </tr> 
        <tr> 
        <td><input type="checkbox" style="width:20px;" value="1" name="checkbox" class="checkbox_check"></td> 
        <td class="td_name">Timeplot</td> 
        <td><input class="add_menu_item_table" name="add_menu_item" value="Add" type="button"></td> 
        </tr> 
        <tr> 
        <td><input type="checkbox" style="width:20px;" value="1" name="checkbox" class="checkbox_check"></td> 
        <td class="td_name">Operations Manuals</td> 
        <td><input class="add_menu_item_table" name="add_menu_item" value="Add" type="button"></td> 
        </tr> 
        <tr> 
        <td><input type="checkbox" style="width:20px;" value="1" name="checkbox" class="checkbox_check"></td> 
        <td class="td_name">Company Structure</td> 
        <td><input class="add_menu_item_table" name="add_menu_item" value="Add" type="button"></td> 
        </tr> 
        <tr> 
        <td><input type="checkbox" style="width:20px;" value="1" name="checkbox" class="checkbox_check"></td> 
        <td class="td_name">CMS Report</td> 
        <td><input class="add_menu_item_table" name="add_menu_item" value="Add" type="button"></td> 
        </tr> 
        <tr> 
        <td><input type="checkbox" style="width:20px;" value="1" name="checkbox" class="checkbox_check"></td> 
        <td class="td_name">Test Document</td> 
        <td><input class="add_menu_item_table" name="add_menu_item" value="Add" type="button"></td> 
        </tr> 
        <tr> 
        <td><input type="checkbox" style="width:20px;" value="1" name="checkbox" class="checkbox_check"></td> 
        <td class="td_name">Test CMS page</td> 
        <td><input class="add_menu_item_table" name="add_menu_item" value="Add" type="button"></td> 
        </tr> 
        </tbody> 
        </table> 
+0

'$ ('input.checkbox_check'). checked', true ise – mmcrae

+1

@ mmcrae 'false' işaretliyse yanlıştır. JQuery nesnesinin 'checked' özelliği yoktur. Sanırım, '$' ('input.checkbox_check') [0] .checked' – Paul

cevap

703
if ($('input.checkbox_check').is(':checked')) { 
+1

anlamına geldiğini kastediyorsunuz. $ (This) .closest ('tr'). Find ('. Checkbox_check') ' – SLaks

+1

CoffeeScript'te:' $ ('#my_checkbox'). '' kontrol edildi '' – Dennis

+6

Kod, jQuery doc tarafından onaylandı, "bir onay kutusunun işaretli olup olmadığını belirlemek için tarayıcılar arası bir yol, özelliği kullanmaktır:" if (elem.checked) "veya eğer ($ (elem) .prop ("checked")) 'veya' if ($ (elem) .is (": checked")) '". bkz. http://api.jquery.com/prop/ –

90

veya daha yüksek:

if ($('input.checkbox_check').prop('checked')) { 
    //blah blah 
} 

çapraz tarayıcı uyumluluğu yolu onay kutusu işaretli ise bu $("#checkboxId").prop('checked', true) kontrol etmek, tesisi https://api.jquery.com/prop/

+6

" .prop() yöntemi, eşleşen kümedeki yalnızca ilk öğe için özellik değerini aldığını unutmayın. " http://api.jquery.com/prop/ adresini ziyaret edin –

13

bu $('#checkboxId').is(':checked') kullanmak için

& kontrol edilir olmadığını doğrulamak için olduğunu belirlemek için

& this $("#checkboxId").prop('checked', false) onay işareti

4

Başlıca bilgileri görün ATTR | PROP | IS aşağıda:

Source: http://api.jquery.com/attr/

$("input") 
 
    .change(function() { 
 
    var $input = $(this); 
 
    $("p").html(".attr('checked'): <b>" + $input.attr("checked") + "</b><br>" + 
 
     ".prop('checked'): <b>" + $input.prop("checked") + "</b><br>" + 
 
     ".is(':checked'): <b>" + $input.is(":checked") + "</b>"); 
 
    }) 
 
    .change();
p { 
 
    margin: 20px 0 0; 
 
    } 
 
    b { 
 
    color: blue; 
 
    }
<meta charset="utf-8"> 
 
    <title>attr demo</title> 
 
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
 
</head> 
 
<body> 
 
    
 
<input id="check1" type="checkbox" checked="checked"> 
 
<label for="check1">Check me</label> 
 
<p></p> 
 
    
 

 
    
 
</body> 
 
</html>
yukarıdaki çözümlerin hiçbiri herhangi bir nedenle çalışıyorsanız

4

, benim durumumda olduğu gibi, bu deneyin:

<script type="text/javascript"> 
    $(function() 
    { 
     $('[name="my_checkbox"]').change(function() 
     { 
     if ($(this).is(':checked')) { 
      // Do something... 
      alert('You can rock now...'); 
     }; 
     }); 
    }); 
    </script>