Question

I have an ASP.NET 2.0 ListView control (aka:parent) and configured inside this ListView I have another ListView (aka:child). For each row the parent has there is potentially a child ListView control which can have 1-3 rows. Each row has two checkboxes (a select checkbox and a deny checkbox).

I need to process these checkboxes in JavaScript so that if one select is chosen on any of the rows all other select checkboxes are unchecked AND the deny checkbox for that row only is unchecked. The rows which were NOT selected CAN have the deny checkboxes checked.

What is the best approach to this?

Answer 1

I did my best to understand how the markup would be from your description, but basically I built multiple divs containing a set of checkbox inputs (ignore the poor markup).

<div>
    <form>
        <label>Yes</label>
        <input type="checkbox" value="1" name="alerts[rateAlert]" class="alert_check_box auto_check_box" tabindex="1000" autocomplete="off">
        <label>No</label>
        <input type="checkbox" value="1" name="alerts[rateAlert]" class="alert_check_box auto_check_box" tabindex="1000" autocomplete="off">
        <label>Maybe</label>
        <input type="checkbox" value="1" name="alerts[rateAlert]" class="alert_check_box auto_check_box" tabindex="1000" autocomplete="off">
    </form>
</div>
<div>
    <form>
        <label>Yes</label>
        <input type="checkbox" value="1" name="alerts[rateAlert]" class="alert_check_box auto_check_box" tabindex="1000" autocomplete="off">
        <label>No</label>
        <input type="checkbox" value="1" name="alerts[rateAlert]" class="alert_check_box auto_check_box" tabindex="1000" autocomplete="off">
        <label>Maybe</label>
        <input type="checkbox" value="1" name="alerts[rateAlert]" class="alert_check_box auto_check_box" tabindex="1000" autocomplete="off">
    </form>
</div>

From here I started by using jQuery (very easy to use but up to you to figure out how to set up).

$('input').change(function(){
    if($(this).attr('checked')) {
        $(this).parent().find('input').attr('checked', false);
        $(this).attr('checked', true);
    }
});

This script listens for a change event on all check boxes and then runs a check based on the parent it is contained in. If this check-box is checked, un-check all the other check-boxes contained within that parent.

You can make this more specific inside your if statement or create an else if statement for other specific use cases.

if( check-box is checked and doesnt have class name ABC ) { 
    //do normal stuff above 
} else if( specific check-box with class name of ABC is checked ) { 
    //do something else 
}